web-dev-qa-db-ja.com

React NativeでローカルJSONファイルからデータを取得する方法は?

JSONなどのローカルファイルを保存し、コントローラーからデータを取得するにはどうすればよいですか?

80
mrded

React Native 0.4.3以降では、次のようにローカルJSONファイルを読み取ることができます。

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

そして、通常のJSオブジェクトのようにcustomDataにアクセスします。

114
peter

ES6/ES2015バージョン:

import customData from './customData.json';
95
PaulMest

ES6/ES2015の場合、importのように直接できます:

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


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

TypeScriptを使用する場合、次のようにjsonモジュールを宣言できます。

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

これを使って

import data from './customData.json';
8

多分 AsyncStoragesetItemgetItem...そしてデータを文字列として保存し、 json parser を使用して再びjsonに変換します...

1
clagccs

このGithubの問題をご覧ください。

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

彼らはrequire非JSONファイル、特にJSONを試みています。今のところこれを行う方法はないので、AsyncStorageを@CocoOSの言及どおりに使用するか、必要なことを行うために小さなネイティブモジュールを作成する必要があります。

1
Colin Ramsay