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

Question

我对图像源和 Obj 的参数有疑问。
在本地对象内部，我有 IMG_NAME: 'A.png'，如下所示：

我想将此值与源连接，例如

但我知道 require 不支持连接所以我决定问你这个问题关于解决这个问题的最佳方法。

我该如何尝试解决这个问题（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

我认为在图像组件中使用动态源有 4 种简单的方法：

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

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

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

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

对于Android assets 文件夹中的图片，使用asset:/ 方案：

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存储图像。