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

103

Come posso archiviare file locali come JSON e quindi recuperare i dati dal controller?

json react-native local-files

— mrded
fonte

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.

— Peter
fonte

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';

— PaulMest
fonte

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;
}

— Little Roys
fonte

10

Usa questo

import data from './customData.json';

— Mudassir Zakaria
fonte

2

forse potresti usare AsyncStorage setItem e getItem ... e memorizzare i dati come stringa, quindi utilizzare il parser json per convertirlo di nuovo in json ...

— clagccs
fonte

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.

— Colin Ramsay
fonte