android - react native : How to import local image with dynamic name

Question

我在本地有大约100个英雄的图像需要导入到 ListView 中。这是我的 hero.js

renderRow(hero) {
return (
          <View>
              <View style={styles.container}>
                  <Image
                      source={require('./img/hero/'+hero.img+'.jpg')}
                      style={styles.thumbnail} />
                  <View style={styles.rightContainer}>
                      <Text style={styles.title}>{hero.name}</Text>
                  </View>
              </View>
              <View style={styles.separator} />
          </View>
);

经过一些研究，我知道要求 不允许动态名称。我也试过 uri，没有错误，但也没有图像。

{{uri: './img/hero/'+hero.img+'.jpg'}}

我的文件夹结构是这样的:

Project
  index.ios.js
  hero.js
  img
    hero

处理此问题的最佳方法是什么，我不想将图像放在网络上。

Answer 1

sahrens 在这个 forum 上说了以下内容

We intentionally don't support dynamically generated image names because it makes it very hard to manage assets over time, just like how you wouldn't want to do

看起来可以通过 uri 完成但这需要一些工作。您将需要在 xcode Assets 中添加您的图像，对于 android，您需要在 res/drawable 下添加图像。

然后你可以用<Image source={{ uri: "image" + "name" }} />得到你的图像