Question

我在本地有大约100个英雄的图像，需要导入到列表视图中。这是我的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>
);

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

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

我的文件夹结构如下：

Project
  index.ios.js
  hero.js
  img
    hero

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

Answer 1

sahrens在forum

上说了以下内容

我们故意不支持动态生成的图片名称，因为随着时间的推移管理资产非常困难，就像你不想做的那样

看起来可以通过uri完成，但需要一些工作。你需要在xcode资产中添加你的图像，在res / drawable下添加你的android。

然后，您可以使用<Image source={{ uri: "image" + "name" }} />

获取图片

Answer 2

我以一种方式解决了这个问题，只是在这里发布我的答案以防其他人如何处理这个问题。

我写了一个php脚本来读取我的英雄文件夹中的所有图像并以这种格式打印出来：

heroName: require ('./img/hero/heroName.jpg')

<?php
    $dir = "./img/hero";

    // Open a known directory, and proceed to read its contents
    if (is_dir($dir)) {
        if ($dh = opendir($dir)) {
            $images = array();

            while (($file = readdir($dh)) !== false) {
                $keyName = str_replace(".jpg","",$file);
                print "$keyName: require('./img/hero/$file'),". "<br />";
            }

            closedir($dh);

        }
    }
?>

然后我复制结果，粘贴到js文件中并像这样存储：

export default heroList = {
   name1: require('./img/hero/name1.jpg'),
   name2: require('./img/hero/name2.jpg'),
   etc....
}

最后在我的hero.js文件中：

import heroList from './heroList';
....
source={heroList[heroName]}

React Native：如何使用动态名称导入本地图像

2 个答案: