Como obter dados do arquivo JSON local no react native?

103

Como posso armazenar arquivos locais, como JSON e, em seguida, buscar os dados do controlador?

json react-native local-files mrded
fonte

Respostas:

146

Desde React Native 0.4.3, você pode ler seu arquivo JSON local assim:

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

e acesse customData como um objeto JS normal.

Peter
fonte
Esta sintaxe ainda é compatível? porque eu não posso usar essa sintaxe no meu código.
Sohail Mohabbat Ali
1
Parece funcionar com React Native 0.26.2 para iOS. Você pode querer verificar react-native -ve tentar ler o package.json.
Pedro
customData armazenando apenas os primeiros 3500 caracteres do arquivo customData.json, Qualquer outra maneira de carregar um arquivo grande @peter
Akki
@Akki Dividir em vários arquivos menores?
Simon Forsberg
Funciona perfeitamente - P: Por que não consigo usar a sintaxe de importação?
dod_basim
111

Versão ES6 / ES2015:

import customData from './customData.json';
PaulMest
fonte
poderia ter qualquer nome ou tem que sercustomData
farmcommand2
2
@ farmcommand2 Pode ser qualquer nome. import myJsonFile from './foobar.json';
PaulMest
1
Acabei de tentar com React Native 0.57 e parece que a extensão .json não é necessária.
Manuel Zapata de
1
@ManuelZapata Correto. Se você excluir o sufixo, o resolvedor de módulo tentará extensões diferentes até encontrar uma que funcione. Mais informações aqui: nodejs.org/api/modules.html#modules_all_together
PaulMest
18

Para ES6 / ES2015 você pode importar diretamente como:

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


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

Se você usa o texto digitado, pode declarar o módulo json como:

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

Usa isto

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

talvez você possa usar AsyncStorage setItem e getItem ... e armazenar os dados como string e, em seguida, usar o analisador json para convertê-lo novamente em json ...

clágccs
fonte
1

Dê uma olhada neste problema do Github:

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

Eles estão tentando requirearquivos não JSON, em particular JSON. Não há nenhum método para fazer isso agora, então você tem que usar AsyncStorage como @CocoOS mencionou, ou você pode escrever um pequeno módulo nativo para fazer o que você precisa fazer.

Colin Ramsay
fonte