Comment récupérer les données d'un fichier JSON local sur React Native?

103

Comment puis-je stocker des fichiers locaux tels que JSON, puis récupérer les données du contrôleur?

json react-native local-files mrded
la source

Réponses:

146

Depuis React Native 0.4.3, vous pouvez lire votre fichier JSON local comme ceci:

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

puis accédez à customData comme un objet JS normal.

peter
la source
Cette syntaxe est-elle toujours prise en charge? car je ne peux pas utiliser cette syntaxe dans mon code.
Sohail Mohabbat Ali
1
Semble fonctionner avec React Native 0.26.2 pour iOS. Vous voudrez peut-être vérifier react-native -vet essayer de lire le fichier package.json.
peter
customData ne stockant que les 3500 premiers caractères du fichier customData.json, toute autre façon de charger un fichier volumineux @peter
Akki
@Akki Le diviser en plusieurs fichiers plus petits?
Simon Forsberg
Cela fonctionne parfaitement - Q: Pourquoi ne puis-je pas utiliser la syntaxe d'importation à la place?
dod_basim
111

Version ES6 / ES2015:

import customData from './customData.json';
PaulMest
la source
pourrait-il avoir un nom ou doit-il êtrecustomData
farmcommand2
2
@ farmcommand2 Cela peut être n'importe quel nom. import myJsonFile from './foobar.json';
PaulMest
1
Je viens d'essayer avec React Native 0.57, et il semble que l'extension .json n'est pas nécessaire.
Manuel Zapata
1
@ManuelZapata C'est exact. Si vous excluez le suffixe, le résolveur de module essaiera différentes extensions jusqu'à ce qu'il en trouve une qui fonctionne. Plus d'informations ici: nodejs.org/api/modules.html#modules_all_together
PaulMest
18

Pour ES6 / ES2015, vous pouvez importer directement comme:

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


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

Si vous utilisez dactylographié, vous pouvez déclarer un module json comme:

// tying.d.ts
declare module "*.json" {
    const value: any;
    export default value;
}
Petits Roys
la source
10

Utilisez ceci

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

peut-être que vous pourriez utiliser AsyncStorage setItem et getItem ... et stocker les données sous forme de chaîne, puis utiliser l'analyseur json pour le convertir à nouveau en json ...

clagccs
la source
1

Jetez un œil à ce problème Github:

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

Ils essaient de requirefichiers non JSON, en particulier JSON. Il n'y a pas de méthode pour le faire pour le moment, vous devez donc soit utiliser AsyncStorage comme @CocoOS l'a mentionné, soit écrire un petit module natif pour faire ce que vous devez faire.

Colin Ramsay
la source