Wie rufe ich Daten aus der lokalen JSON-Datei ab, wenn ich native reagiere?

102

Wie kann ich lokale Dateien wie JSON speichern und dann die Daten vom Controller abrufen?

json react-native local-files mrded
quelle

Antworten:

144

Seit React Native 0.4.3 können Sie Ihre lokale JSON-Datei folgendermaßen lesen:

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

und greifen Sie dann wie bei einem normalen JS-Objekt auf customData zu.

Peter
quelle
Wird diese Syntax noch unterstützt? weil ich diese Syntax nicht in meinem Code verwenden kann.
Sohail Mohabbat Ali
1
Scheint mit React Native 0.26.2 für iOS zu funktionieren. Vielleicht möchten Sie mit überprüfen react-native -vund versuchen, die zu lesen package.json.
Peter
customData speichert nur die ersten 3500 Zeichen der Datei customData.json. Jede andere Möglichkeit, eine große Datei zu laden @peter
Akki
@Akki Teilen Sie es in mehrere kleinere Dateien?
Simon Forsberg
Es funktioniert perfekt - F: Warum kann ich stattdessen keine Importsyntax verwenden?
dod_basim
110

ES6 / ES2015 Version:

import customData from './customData.json';
PaulMest
quelle
könnte es irgendeinen Namen haben oder muss es seincustomData
farmcommand2
2
@ farmcommand2 Es kann ein beliebiger Name sein. import myJsonFile from './foobar.json';
PaulMest
1
Ich habe es gerade mit React Native 0.57 versucht und es sieht so aus, als ob die Erweiterung .json nicht erforderlich ist.
Manuel Zapata
1
@ ManuelZapata Das ist richtig. Wenn Sie das Suffix ausschließen, versucht der Modul-Resolver verschiedene Erweiterungen, bis er eine findet, die funktioniert. Weitere Infos hier: nodejs.org/api/modules.html#modules_all_together
PaulMest
17

Für ES6 / ES2015 können Sie direkt importieren wie:

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


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

Wenn Sie Typoskript verwenden, können Sie das JSON-Modul wie folgt deklarieren:

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

Benutze das

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

Schauen Sie sich diese Github-Ausgabe an:

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

Sie versuchen, requireNicht-JSON-Dateien, insbesondere JSON, zu verwenden. Derzeit gibt es keine Methode, um dies zu tun. Sie müssen also entweder AsyncStorage wie bei @CocoOS erwähnt verwenden oder ein kleines natives Modul schreiben, um das zu tun, was Sie tun müssen.

Colin Ramsay
quelle