名称中的React native Image变量不起作用

Question

我正在尝试加载一个在其源代码中有变量的图像,就像这样.

<View>
  {_.map(this.state.ambiences, (id) => {
    var image = require('../../assets/img/ambiances/icons/' + label + '.png'); // variable label equals "chic" here
    var image2 = require('../../assets/img/ambiances/icons/chic.png');
    return <Image style={styles.pastilleOverlay} source={image} />;
  })}
</View>

我收到以下错误(尝试设置变量图像时抛出):需要未知模块"../../assets/img/ambiances/icons/chic.png"

如果我对该var image = ...行进行注释,它source={image2}在Image标签中可以正常工作.

我检查过,两个字符串完全相同.有任何想法吗 ？

Answer 1

解决方法

也许这个问题可以帮到你.

我们故意不支持动态生成的图像名称,因为它使得资产随着时间的推移变得非常困难,就像你不想做的那样,我需要做一个my MyComponent = require('./'+ libName + typeOfComponent); 或类似的东西.像这样的动态图像名称生成也不适用于我们推出的新动态资产管理系统,让您只需使用cmd + R即可添加和更新资产(不再需要添加到Xcode并重新编译).

捆绑的图像

如文档所述,您要使用的图像需要"通过Xcode资产目录或Android drawable文件夹"捆绑在一起.您还必须手动指定图像的尺寸.

请注意,此方法不提供安全检查.由您来保证这些图像在应用程序中可用.

<View>
    {_.map(this.state.ambiences, (id) => {
        return <Image style={styles.pastilleOverlay} source={{ uri: '../../assets/img/ambiances/icons/' + label + '.png' }} style={{width: 40, height: 40}} />;
    })}
</View>

替代

您对使用switch或if语句有何看法？

<View>
    {_.map(this.state.ambiences, (id) => {
        switch (label) {
            case "chic":
                return <Image style={styles.pastilleOverlay} source={require('../../assets/img/ambiances/icons/chic.png')} />;
            case "otherimage":
                return <Image style={styles.pastilleOverlay} source={require('../../assets/img/ambiances/icons/otherimage.png')} />;
            default:
                return <Image style={styles.pastilleOverlay} source={require('../../assets/img/ambiances/icons/default.png')} />;
        }
    })}
</View>