¿Cómo recuperar datos del archivo JSON local en react native?

Respuestas:

146

Desde React Native 0.4.3, puede leer su archivo JSON local de esta manera:

const customData = require('./customData.json');

y luego acceda a customData como un objeto JS normal.

pedro
fuente
¿Sigue siendo compatible esta sintaxis? porque no puedo usar esta sintaxis en mi código.
Sohail Mohabbat Ali
1
Parece funcionar con React Native 0.26.2 para iOS. Es posible que desee consultar react-native -ve intentar leer el package.json.
peter
customData solo almacena los primeros 3500 caracteres del archivo customData.json, cualquier otra forma de cargar un archivo grande @peter
Akki
@Akki ¿Dividirlo en varios archivos más pequeños?
Simon Forsberg
Funciona perfectamente. P: ¿Por qué no puedo usar la sintaxis de importación?
dod_basim
111

Versión ES6 / ES2015:

import customData from './customData.json';
PaulMest
fuente
¿Podría tener algún nombre o tiene que sercustomData
farmcommand2
2
@ farmcommand2 Puede ser cualquier nombre. import myJsonFile from './foobar.json';
PaulMest
1
Acabo de probar con React Native 0.57 y parece que la extensión .json no es necesaria.
Manuel Zapata
1
@ManuelZapata Eso es correcto. Si excluye el sufijo, el módulo de resolución probará diferentes extensiones hasta que encuentre una que funcione. Más información aquí: nodejs.org/api/modules.html#modules_all_together
PaulMest
18

Para ES6 / ES2015 puede importar directamente como:

// example.json
{
    "name": "testing"
}


// ES6/ES2015
// app.js
import * as data from './example.json';
const word = data.name;
console.log(word); // output 'testing'

Si usa mecanografiado, puede declarar el módulo json como:

// tying.d.ts
declare module "*.json" {
    const value: any;
    export default value;
}
Little Roys
fuente
10

Utilizar este

import data from './customData.json';
Mudassir Zakaria
fuente
1

Eche un vistazo a este problema de Github:

https://github.com/facebook/react-native/issues/231

Están intentando requirearchivos que no son JSON, en particular JSON. No hay un método para hacer esto en este momento, por lo que debe usar AsyncStorage como mencionó @CocoOS, o puede escribir un pequeño módulo nativo para hacer lo que necesita hacer.

Colin Ramsay
fuente