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

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