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

103

¿Cómo puedo almacenar archivos locales como JSON y luego recuperar los datos del controlador?

json react-native local-files

— mrded
fuente

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

2

tal vez podría usar AsyncStorage setItem y getItem ... y almacenar los datos como una cadena, luego usar el analizador json para convertirlo nuevamente a json ...

— clagccs
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