反応ネイティブでローカルJSONファイルからデータをフェッチする方法？

102

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

json react-native local-files

— mrded
ソース

144

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

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

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

— ピーター
ソース

この構文はまだサポートされていますか？私のコードではこの構文を使用できないためです。

— Sohail Mohabbat Ali

1

iOS用のReact Native 0.26.2で動作するようです。を確認しreact-native -v、を読んでみてくださいpackage.json。

— ピーター、2016年

customDataはファイルcustomData.jsonの最初の3500文字のみを格納します。大きなファイル@peterをロードする他の方法

— Akki

@Akki複数の小さなファイルに分割しますか？

— Simon Forsberg、2017

完全に機能します-Q：代わりにインポート構文を使用できないのはなぜですか？

— dod_basim

111

ES6 / ES2015バージョン：

import customData from './customData.json';

— ポールメスト
ソース

名前を付けることができますか、それともする必要がありますcustomData

— farmcommand2

2

@ farmcommand2任意の名前を指定できます。import myJsonFile from './foobar.json';

— PaulMest 2017

1

私はReact Native 0.57を試してみましたが、.json拡張子は必要ないようです。

— Manuel Zapata、

1

@ManuelZapataそうですね。サフィックスを除外すると、モジュールリゾルバーは、機能する拡張機能が見つかるまで、さまざまな拡張機能を試します。詳細はこちら：nodejs.org/api/modules.html#modules_all_together

— PaulMest

17

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'

typescriptを使用する場合は、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/issues/231

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

— コリン・ラムゼイ
ソース