Як отримати дані з локального файлу JSON на рідну реакцію?

103

Як я можу зберігати локальні файли, такі як JSON, а потім отримувати дані з контролера?

json react-native local-files

— мред
джерело

146

Оскільки React Native 0.4.3 ви можете прочитати ваш локальний файл JSON таким чином:

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

а потім отримати доступ до customData, як звичайний об'єкт JS.

— петер
джерело

Чи підтримується цей синтаксис? тому що я не можу використовувати цей синтаксис у своєму коді.

— Sohail Mohabbat Ali

1

Здається, працює з React Native 0.26.2 для iOS. Ви можете поцікавитися react-native -vі спробувати прочитати package.json.

— пітер

CustomData тільки зберігати перші 3500 символів файл customData.json, будь-який інший спосіб , щоб завантажити великий файл @peter

— Äkki

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

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

Це чудово працює - Питання: Чому замість цього я не можу використовувати синтаксис імпорту?

— dod_basim

111

Версія ES6 / ES2015:

import customData from './customData.json';

— ПолМест
джерело

чи могла вона мати якесь ім’я чи це має бути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_together

— 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'

Якщо ви використовуєте typecript, ви можете оголосити модуль json таким чином:

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

— Маленькі Рози
джерело

10

Використовуй це

import data from './customData.json';

— Мудасир Закарія
джерело

2

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

— clagccs
джерело

1

Погляньте на цей випуск Github:

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

Вони намагаються requireне-файли JSON, зокрема JSON. Зараз немає способу зробити це, тому вам або доведеться використовувати AsyncStorage як згаданий @CocoOS, або ви можете написати невеликий рідний модуль, щоб зробити те, що вам потрібно зробити.

— Колін Рамсей
джерело