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
source

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
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
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
source

10

Utilisez ceci

import data from './customData.json';

— Mudassir Zakaria
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
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
source