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

Question

我有一个图像Source和Obj参数的问题 在本地对象内部我IMG_NAME: 'A.png'如下：

我想将这个值与源类似的连接起来
但我知道要求不支持连接，所以我决定问你这个问题，解决这个问题的最佳方法。

我如何尝试解决此问题（my solve screenshot）和错误图片（Error reponse）

Answer 1

如果可以将本地对象更改为此

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

然后将组件更改为

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

编辑另一个方法使用switch case语句

要求不支持动态路径。使用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)} />

Answer 2

我认为在Image Component中使用动态源有4种简单的方法：

1）您可以使用已捆绑到应用程序中的图像：

  

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

     

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

     

＆LT; Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

     

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

     

＆LT; Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

     

这些方法不提供安全检查。这取决于你保证   那些图像在应用程序中可用。你也必须这样做   手动指定图像尺寸。

https：//facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources

2）您可以在对象中使用require（'imagePath'）。

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

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

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

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