Bagaimana cara mengambil data dari file JSON lokal di react native?

103

Bagaimana cara menyimpan file lokal seperti JSON dan kemudian mengambil data dari pengontrol?

json react-native local-files mrded
sumber

Jawaban:

146

Sejak React Native 0.4.3 Anda dapat membaca file JSON lokal Anda seperti ini:

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

lalu akses customData seperti objek JS biasa.

peter
sumber
Apakah sintaks ini masih didukung? karena saya tidak dapat menggunakan sintaks ini dalam kode saya.
Sohail Mohabbat Ali
1
Sepertinya bekerja dengan React Native 0.26.2 untuk iOS. Anda mungkin ingin memeriksa react-native -vdan mencoba membaca package.json.
peter
customData hanya menyimpan 3500 karakter pertama dari file customData.json, Cara lain apa pun untuk memuat file besar @peter
Akki
@ Akki Bagilah menjadi beberapa file yang lebih kecil?
Simon Forsberg
Ini berfungsi dengan sempurna - T: Mengapa saya tidak dapat menggunakan sintaks impor sebagai gantinya?
dod_basim
111

Versi ES6 / ES2015:

import customData from './customData.json';
PaulMest
sumber
dapatkah itu memiliki nama atau haruscustomData
farmcommand2
2
@ farmcommand2 Bisa dengan nama apapun. import myJsonFile from './foobar.json';
PaulMest
1
Saya baru saja mencoba dengan React Native 0.57, dan sepertinya ekstensi .json tidak diperlukan.
Manuel Zapata
1
@ManuelZapata Itu benar. Jika Anda mengecualikan sufiks, resolver modul akan mencoba ekstensi yang berbeda hingga menemukan ekstensi yang berfungsi. Info lebih lanjut di sini: nodejs.org/api/modules.html#modules_all_together
PaulMest
18

Untuk ES6 / ES2015 Anda dapat mengimpor langsung seperti:

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


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

Jika Anda menggunakan skrip ketikan, Anda dapat mendeklarasikan modul json seperti:

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

Gunakan ini

import data from './customData.json';
Mudassir Zakaria
sumber
2

mungkin Anda bisa menggunakan AsyncStorage setItem dan getItem ... dan menyimpan data sebagai string, lalu gunakan parser json untuk mengubahnya lagi menjadi json ...

clagccs
sumber
1

Lihat masalah Github ini:

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

Mereka mencoba requirefile non-JSON, khususnya JSON. Tidak ada metode untuk melakukan ini sekarang, jadi Anda harus menggunakan AsyncStorage seperti yang disebutkan @CocoOS, atau Anda dapat menulis modul asli kecil untuk melakukan apa yang perlu Anda lakukan.

Colin Ramsay
sumber