时间戳

首页 > 解决方案 > 如何为反应原生 ios 导入数据文件（json、jsx、js 等）？

react-native - 如何为反应原生 ios 导入数据文件（json、jsx、js 等）？

问题描述

我有一个类似这样的数据文件。

[
  {
    "id": 1,
    "title": "Car",
    "personal_require": 1,
    "public_serve": 1,
    "public_require": 1,
    "personal_serve": 1
  },
  {
    "id": 2,
    "title": "House",
    "personal_require": 1,
    "public_serve": 1,
    "public_require": 1,
    "personal_serve": 1
  },
  {
    "id": 3,
    "title": "Finance",
    "personal_require": 1,
    "public_serve": 1,
    "public_require": 1,
    "personal_serve": 1
  }
]

我使用导入，它适用于网络，但对于 iOS，系统似乎无法找到该文件。我收到错误：

构建 JavaScript 包失败。无法从 /Users/wlin/dev/wishlist/screens/ServeScreen.tsx 解析模块../tests /data/defaultWishlist.json：

这些文件都不存在： * defaultWishlist.json * 测试/data/defaultWishlist.json/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx| .ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json) 15 | 从“../components/WishlistItemText”导入 WishlistItem；16 | 从“../types”导入{愿望清单}；

17 | 从“ ../tests /data/defaultWishlist.json”导入 * 作为 defaultWishlist ；| ^ 18 | 19 | 类型 ServeNavigationProp = StackNavigationProp<ServeParamList, "ServeScreen">; 20 | type Props = { 警告：检查守望者版本时出现问题。无效版本：20210524。

我已经尝试过 json、js、ts、jsx ......它们都不起作用。完整代码在这里：https ://github.com/dotku/aladdin/tree/iosBundleFail

标签： react-nativeexpo

解决方案

正如我所看到的，您试图错误地导入它。

要解决此问题，请将您的 defaultWishlist.js 更改为 defaultWishlist.json，然后不要在 json 文件中使用 export。

/测试/data/defaultWishlist.json 的示例：

[
  {
    id: 1,
    title: "Car",
    personal_require: 1,
    public_serve: 1,
    public_require: 1,
    personal_serve: 1,
  },
  {
    id: 2,
    title: "House",
    personal_require: 1,
    public_serve: 1,
    public_require: 1,
    personal_serve: 1,
  },
  {
    id: 3,
    title: "Finance",
    personal_require: 1,
    public_serve: 1,
    public_require: 1,
    personal_serve: 1,
  },
]

然后你可以在每个文件上使用这个 json，只要你调用它：

const list = require('./___test___/defaultWishlist.json');

这是一种可重复的零食：零食示例

编辑：如果您尝试将其作为 JS 文件导入，只需添加。结构应该是这样的：

const export data = [
  {
    id: 1,
    title: "Car",
    personal_require: 1,
    public_serve: 1,
    public_require: 1,
    personal_serve: 1,
  },
  {
    id: 2,
    title: "House",
    personal_require: 1,
    public_serve: 1,
    public_require: 1,
    personal_serve: 1,
  },
  {
    id: 3,
    title: "Finance",
    personal_require: 1,
    public_serve: 1,
    public_require: 1,
    personal_serve: 1,
  },
]

然后在您的文件中，您将这样称呼它：

import {data} from './___test___/defaultWishlist.js'

推荐阅读