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

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

2

Vielleicht könnten Sie AsyncStorage setItem und getItem verwenden ... und die Daten als Zeichenfolge speichern und dann den json-Parser verwenden, um sie erneut in json zu konvertieren ...

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