如何在Native Base v2的Thumbnail中使用JSON文件属性传入的本地图片

错误原因 #

你当前代码里require({item.image})的写法本身不符合JS语法，require()参数里多套了一层不必要的对象括号，这是触发语法报错的直接原因。另外React Native的require静态资源加载本身不支持动态传入路径，必须是编译阶段就能确定的字符串字面量，所以就算你去掉外层对象括号写成require(item.image)也会加载失败。

解决方案 #

方案1：提前映射所有本地静态资源（推荐，性能更好）

1. 在当前代码文件头部提前声明所有需要用到的图片的require映射：

// 所有用到的本地图片提前require，key和JSON里的image标识对应即可
const imageAssets = {
  jeng: require('../src/medi_data/image/jeng.jpg'),
  // 后续新增图片都在这里补充映射
}

2. 修改你的JSON文件，把image字段的值改成对应映射的key，不要存路径：

[
  {
    "setId": 1,
    "id": 1,
    "name": "Acc",
    "details": "details1",
    "image": "jeng"
  },
  {
    "setId": 1,
    "id": 2,
    "name": "Bcc",
    "details": "details2",
    "image": "jeng"
  }
]

3. 修改Thumbnail组件的source属性：

<Thumbnail source={imageAssets[item.image]} />

方案2：原生资源动态加载

如果你的图片数量非常多，不想提前逐个声明，可以把图片放到原生资源目录下，通过uri动态加载：

• 安卓端把图片放到android/app/src/main/res/drawable目录，iOS端把图片导入到项目的Images.xcassets中
• JSON文件的image字段直接存图片文件名："image": "jeng.jpg"
• 修改Thumbnail组件的source属性：

<Thumbnail source={{ uri: item.image }} />

内容的提问来源于stack exchange，提问作者SIRASIT