Come recuperare i dati dal file JSON locale su React Native?


Risposte:


146

Da React Native 0.4.3 puoi leggere il tuo file JSON locale in questo modo:

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

e quindi accedi a customData come un normale oggetto JS.


Questa sintassi è ancora supportata? perché non posso usare questa sintassi nel mio codice.
Sohail Mohabbat Ali

1
Sembra funzionare con React Native 0.26.2 per iOS. Potresti voler controllare react-native -ve provare a leggere il file package.json.
peter

customData memorizza solo i primi 3500 caratteri del file customData.json, qualsiasi altro modo per caricare file di grandi dimensioni @peter
Akki

@ Akki Dividerlo in più file più piccoli?
Simon Forsberg

Funziona perfettamente - D: Perché non posso usare invece la sintassi di importazione?
dod_basim

111

Versione ES6 / ES2015:

import customData from './customData.json';

potrebbe avere un nome o deve esserecustomData
farmcommand2

2
@ farmcommand2 Può essere qualsiasi nome. import myJsonFile from './foobar.json';
PaulMest

1
Ho appena provato con React Native 0.57 e sembra che l'estensione .json non sia necessaria.
Manuel Zapata

1
@ManuelZapata È corretto. Se escludi il suffisso, il risolutore del modulo proverà estensioni diverse finché non ne trova una che funzioni. Maggiori informazioni qui: nodejs.org/api/modules.html#modules_all_together
PaulMest

18

Per ES6 / ES2015 puoi importare direttamente come:

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


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

Se usi il dattiloscritto, puoi dichiarare il modulo json come:

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



1

Dai un'occhiata a questo problema di Github:

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

Stanno provando a requirefile non JSON, in particolare JSON. Non esiste un metodo per farlo in questo momento, quindi devi usare AsyncStorage come menzionato da @CocoOS, oppure potresti scrivere un piccolo modulo nativo per fare quello che devi fare.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.