Как получить данные из локального файла JSON при реагировании на родной?

103

Как я могу хранить локальные файлы, такие как JSON, а затем получать данные из контроллера?

json react-native local-files

147

Начиная с React Native 0.4.3 вы можете читать свой локальный файл JSON следующим образом:

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

а затем получить доступ к customData как к обычному объекту JS.

— Питер
источник

Поддерживается ли этот синтаксис? потому что я не могу использовать этот синтаксис в своем коде.

— Сохаил Мохаббат Али

1

Кажется, работает с React Native 0.26.2 для iOS. Вы можете проверить react-native -vи попробовать прочитать файл package.json.

— Питер

CustomData только хранить первые 3500 символов файл customData.json, любой другой способ , чтобы загрузить большой файл @peter

— Äkki

@Akki Разделить его на несколько файлов меньшего размера?

— Саймон Форсберг

Он работает отлично - В: Почему я не могу использовать синтаксис импорта?

— dod_basim 08

113

Версия ES6 / ES2015:

import customData from './customData.json';

— PaulMest
источник

может ли у него быть какое-нибудь имя или оно должно бытьcustomData

— farmcommand2

2

@ farmcommand2 Имя может быть любым. import myJsonFile from './foobar.json';

— PaulMest

1

Я только что попробовал с React Native 0.57, и похоже, что расширение .json не нужно.

— Мануэль Сапата

1

@ManuelZapata Это верно. Если вы исключите суффикс, преобразователь модулей будет пробовать разные расширения, пока не найдет подходящее. Подробнее здесь: nodejs.org/api/modules.html#modules_all_toght

— PaulMest

18

Для ES6 / ES2015 вы можете импортировать напрямую, например:

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


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

Если вы используете машинописный текст, вы можете объявить модуль json, например:

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

— Little Roys
источник

10

Использовать это

import data from './customData.json';

— Мудассир Закария
источник

2

возможно, вы могли бы использовать AsyncStorage setItem и getItem ... и сохранить данные в виде строки, а затем использовать парсер json для преобразования его снова в json ...

— clagccs
источник

1

Взгляните на эту проблему Github:

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

Они пытаются requireиспользовать файлы, отличные от JSON, в частности JSON. В настоящее время нет способа сделать это, поэтому вам либо нужно использовать AsyncStorage, как упоминалось в @CocoOS, либо вы можете написать небольшой собственный модуль, чтобы делать то, что вам нужно.

— Колин Рамзи
источник

0

Следующие способы получить локальный файл JSON:

Версия ES6 :

import customData from './customData.json'; или import customData from './customData';

Если это внутри .jsфайла, а не .jsonимпортировать как -

import { customData } from './customData';

для дополнительных разъяснений / понимания обратитесь к примеру - Живая рабочая демонстрация

— Вахид Ахтар
источник