react-native 如何从本地JSON文件中获取数据？

Posted 2023-02-22

【中文标题】react-native 如何从本地JSON文件中获取数据？

【英文标题】：How to fetch data from local JSON file on react native?

【发布时间】：2015-06-09 18:16:40

【问题描述】：

如何存储JSON等本地文件，然后从控制器获取数据？

【参考方案1】：

也许您可以使用AsyncStorage setItem 和 getItem...并将数据存储为字符串，然后使用the json parser 再次将其转换为 json.. .

【参考方案2】：

看看这个 Github 问题：

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

他们正在尝试require 非 JSON 文件，尤其是 JSON。目前还没有这样做的方法，所以你要么必须使用 @CocoOS 提到的 AsyncStorage，要么你可以编写一个小的原生模块来做你需要做的事情。

【参考方案3】：

从 React Native 0.4.3 开始，您可以像这样读取本地 JSON 文件：

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

然后像普通的 JS 对象一样访问 customData。

【讨论】：

这个语法还支持吗？因为我不能在我的代码中使用这种语法。

似乎适用于 ios 的 React Native 0.26.2。您可能想检查react-native -v 并尝试阅读package.json。

customData 仅存储文件 customData.json 的前 3500 个字符，任何其他方式加载大文件 @peter

@Akki 把它分成多个小文件？

完美运行 - 问：为什么我不能使用 import 语法？

【参考方案4】：

ES6/ES2015 版本：

import customData from './customData.json';

【讨论】：

它可以有任何名称还是必须是customData

@farmcommand2 可以是任何名称。 import myJsonFile from './foobar.json';

我刚刚尝试了 React Native 0.57，看起来 .json 扩展名不是必需的。

@ManuelZapata 没错。如果您排除后缀，模块解析器将尝试不同的扩展，直到找到一个有效的扩展。更多信息：nodejs.org/api/modules.html#modules_all_together

【参考方案5】：

使用这个

import data from './customData.json';

【参考方案6】：

对于 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;

【参考方案7】：

以下方式获取本地JSON文件-

ES6版本：

import customData from './customData.json'; 或import customData from './customData';

如果它在 .js 文件而不是 .json 中，则像 -

一样导入

import  customData  from './customData';

有关更多说明/理解，请参阅示例 - Live working demo