将图像名称从obj设置为source React Native

Question

我如何尝试解决这个问题（我的解决截图），和错误图像（错误回复）

Answer 1

我认为有4种简单的方法可以在图像组件中使用动态源：1）您可以使用已经捆绑到应用程序中的图像：

来自混合应用程序资源的图像
如果您正在构建混合应用程序（一些UI在React Native中，一些UI在平台代码中），您仍然可以使用已经捆绑到应用程序中的图像。

对于通过Xcode资产目录或Android drawable文件夹包含的图像，请使用不带扩展名的图像名称：

对于Android资产文件夹中的图像，请使用资产：/scheme：

这些方法不提供安全检查。由您来保证这些图像在应用程序中可用。您还必须手动指定图像尺寸。

https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources2）可以在对象中使用要求（'ImagePath'）。

{
  "id_letter": "1",
  "name_letter":"A",
  "img_name":require('./app/assets/images/imgname.jpg');
}

3） 您可以将图像存储在web中，并可以使用：

<Image source={{uri: 'http: //site.com/app/assets/images/'+data.img_name}}/>

4）您可以使用库存储图像https://github.com/wkh237/react-native-fetch-blob.

Answer 2

如果可以修改本地对象更改为这个

{
   "id_letter": "1",
   "name_letter": "A",
   "image" require("./app/assets/images/A.png")
}

然后组件更改为

<Image style={styles.letter_image} source={data.image} />

编辑另一个方法用例语句

不需要支持动态路径。使用switch case语句来解决这个问题

function getImage(img_name) {
  switch(img_name) {
    case "A.png": return require("./app/assets/images/A.png");
    case "B.png": return require("./app/assets/images/B.png");
  }
}

<Image style={styles.letter_image} source={getImage(data.img_name)} />