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

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

 {_.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 ; })}  

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

如果我评论var image = ... line,它可以在Image标签中使用source={image2}

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

解决方法

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

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

捆绑的图像

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

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

  {_.map(this.state.ambiences, (id) => { return ; })}  

替代

您如何看待使用switch或if语句?

  {_.map(this.state.ambiences, (id) => { switch (label) { case "chic": return ; case "otherimage": return ; default: return ; } })}  

这可能有点晚,但如果您必须更改图像源,请更新图像元素的键。 它会将重新渲染的图像视为一个新组件,并且需要正确的图像。

只需在键中使用图像名称,就可以了。