React native üzerinde yerel JSON dosyasından veri nasıl alınır?

104

JSON gibi yerel dosyaları nasıl depolayabilirim ve ardından verileri denetleyiciden nasıl alabilirim?

json react-native local-files

— Mrded
kaynak

147

React Native 0.4.3'ten beri yerel JSON dosyanızı şu şekilde okuyabilirsiniz:

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

ve sonra customData'ya normal bir JS nesnesi gibi erişin.

— Peter
kaynak

Bu sözdizimi hala destekleniyor mu? çünkü bu sözdizimini kodumda kullanamıyorum.

— Sohail Mohabbat Ali

1

İOS için React Native 0.26.2 ile çalışıyor gibi görünüyor. Kontrol react-native -vedip okumayı deneyebilirsiniz package.json.

— peter

customData, customData.json dosyasının yalnızca ilk 3500 karakterini depoluyor, Büyük dosya yüklemenin başka bir yolu @peter

— Akki

@Akki Birden çok küçük dosyaya bölmek mi?

— Simon Forsberg

Mükemmel çalışıyor - S: Bunun yerine neden içe aktarma sözdizimini kullanamıyorum?

— dod_basim

113

ES6 / ES2015 versiyonu:

import customData from './customData.json';

— PaulMest
kaynak

herhangi bir adı olabilir mi yoksa olması mı gerekiyorcustomData

— farmcommand2

2

@ farmcommand2 Herhangi bir isim olabilir. import myJsonFile from './foobar.json';

— PaulMest

1

React Native 0.57 ile denedim ve .json uzantısı gerekli değil gibi görünüyor.

— Manuel Zapata

1

@ManuelZapata Bu doğru. Soneki hariç tutarsanız, modül çözümleyici çalışan bir tane bulana kadar farklı uzantıları deneyecektir. Daha fazla bilgi burada: nodejs.org/api/modules.html#modules_all_together

— PaulMest

19

ES6 / ES2015 için doğrudan şu şekilde içe aktarabilirsiniz :

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


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

TypeScript kullanıyorsanız, json modülünü şu şekilde beyan edebilirsiniz:

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

— Küçük Roys
kaynak

10

Bunu kullan

import data from './customData.json';

— Mudassir Zakaria
kaynak

2

belki kullanabilirsiniz AsyncStorage setItem ve getItem sonra kullanın ... ve dize olarak veri depolamak json ayrıştırıcı json için tekrar dönüştürme için ...

— Clagccs
kaynak

1

Şu Github sorununa bir göz atın:

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

Onlar çalışıyoruz requireözellikle JSON olmayan JSON dosyaları. Şu anda bunu yapmanın bir yöntemi yok, bu yüzden ya AsyncStorage'ı @CocoOS'un belirtildiği gibi kullanmalısınız ya da yapmanız gereken şeyi yapmak için küçük bir yerel modül yazabilirsiniz.

— Colin Ramsay
kaynak

0

Yerel JSON dosyasını getirmenin aşağıdaki yolları:

ES6 versiyonu:

import customData from './customData.json'; veya import customData from './customData';

.jsBunun yerine dosyanın içindeyse şu şekilde .jsoniçe aktar

import { customData } from './customData';

daha fazla açıklama / anlayış için örnek bakınız - Canlı çalışma demosu

— Vahid Akhtar
kaynak