Jak pobrać dane z lokalnego pliku JSON w React Native?

103

Jak mogę przechowywać pliki lokalne, takie jak JSON, a następnie pobrać dane z kontrolera?

mrded
źródło

Odpowiedzi:

147

Od React Native 0.4.3 możesz czytać lokalny plik JSON w następujący sposób:

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

a następnie uzyskaj dostęp do customData jak do zwykłego obiektu JS.

Piotr
źródło
Czy ta składnia jest nadal obsługiwana? ponieważ nie mogę użyć tej składni w moim kodzie.
Sohail Mohabbat Ali
1
Wydaje się, że działa z React Native 0.26.2 dla iOS. Możesz sprawdzić react-native -vi spróbować przeczytać plik package.json.
Piotr
customData przechowuje tylko pierwsze 3500 znaków pliku customData.json, Każdy inny sposób załadowania dużego pliku @peter
Akki
@Akki Podzielić to na kilka mniejszych plików?
Simon Forsberg
Działa doskonale - P: Dlaczego nie mogę zamiast tego użyć składni importu?
dod_basim
113

Wersja ES6 / ES2015:

import customData from './customData.json';
PaulMest
źródło
czy może mieć jakąkolwiek nazwę, czy też musicustomData
farmcommand2
2
@ farmcommand2 Może to być dowolna nazwa. import myJsonFile from './foobar.json';
PaulMest
1
Właśnie próbowałem z React Native 0.57 i wygląda na to, że rozszerzenie .json nie jest potrzebne.
Manuel Zapata
1
@ManuelZapata To prawda. Jeśli wykluczysz sufiks, program do rozpoznawania nazw modułów spróbuje różnych rozszerzeń, aż znajdzie takie, które działa. Więcej informacji tutaj: nodejs.org/api/modules.html#modules_all_together
PaulMest
18

W przypadku ES6 / ES2015 możesz importować bezpośrednio, jak:

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


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

Jeśli używasz TypScriptu, możesz zadeklarować moduł json taki jak:

// tying.d.ts
declare module "*.json" {
    const value: any;
    export default value;
}
Little Roys
źródło
10

Użyj tego

import data from './customData.json';
Mudassir Zakaria
źródło
2

może mógłbyś użyć AsyncStorage setItem i getItem ... i zapisać dane jako ciąg, a następnie użyć parsera json, aby przekonwertować je ponownie na json ...

clagccs
źródło
1

Spójrz na ten problem Github:

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

Próbują requireplików innych niż JSON, w szczególności JSON. W tej chwili nie ma metody, aby to zrobić, więc albo musisz użyć AsyncStorage, jak wspomniano w @CocoOS, albo możesz napisać mały moduł natywny, aby zrobić to, co musisz zrobić.

Colin Ramsay
źródło
0

Następujące sposoby pobierania lokalnego pliku JSON:

Wersja ES6 :

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

Jeśli jest wewnątrz .jspliku, a nie .jsonimportujesz, jak -

import { customData } from './customData';

aby uzyskać więcej wyjaśnień / zrozumienia, zapoznaj się z przykładem - pokaz na żywo

Vahid Akhtar
źródło