Question

我无法弄清楚如何以编程方式在React-Native中添加图片。我有一个目录/img，包含多个图像和一个json文件，data.json包含相应的图像文件路径的数据条目：

[
 {
  "id": "1",
  "img": "img1.png"
 },
 {
  "id": "2",
  "img": "img2.png"
 }
]

我已将data.json加载到var data = require('data.json')的变量中，我可以通过data[0].img正常访问图像路径。另外，我可以创建Image代码，通过<Image source={{uri = "./img/img1.png"}} style={styles.img}/>显示图片。

但是，当我尝试将这两者与<Image source={{uri = "./img/" + data[0].img}} style={styles.img}/>结合使用时，我收到此错误：需要未知模块＆＃34; ./ img / img1.png＆＃34;。如果您确定该模块在那里，请尝试重新启动打包器。

我已经多次重新启动了我的模拟器，在这里搜索了几个小时的文档以找出我做错了什么。任何帮助将不胜感激。

Answer 1

您无法以这种方式显示本地图像。

您可以做的是：

[
 {
  "id": "1",
  "img": require("./img/img1.png")
 },
 {
  "id": "2",
  "img": require("./img/img2.png")
 }
]

然后<Image source={data[0].img} style={styles.img} />

Answer 2

您的代码中有两个“错误”：对象密钥未分配=但:分配。在这种情况下你不能组合字符串，因为AFAIK，最终使用了require()用于图像，除了普通字符串之外它不接受任何其他内容。

我鼓励你这样做：

const assets = {
  img1: './img'+ data[0].img
}

...

<Image source={{uri: assets.img1} style={styles.img}/>

React-Native：打包程序不检测图像

2 个答案: