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

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