名称中的反应本机图像变量不起作用

Posted 2023-03-15

【中文标题】名称中的反应本机图像变量不起作用

【英文标题】：React native Image variable in name doesn't work

【发布时间】：2015-12-15 10:42:32

【问题描述】：

我正在尝试加载一个图像，它的源中有一个变量，就像这样。

<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 = ... 行，它可以与 Image 标签中的 source=image2 一起正常工作。

我查了一下，里面的两个字符串是完全一样的。有什么想法吗？

【问题讨论】：

见***.com/questions/34230446/…

【参考方案1】：

解决方法

也许这个Issue 可以帮助你。

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

捆绑图片

您要使用的图像需要“通过 Xcode 资产目录或 android 可绘制文件夹”捆绑，如 documentation says。您还必须手动指定图像的尺寸。

请注意，此方法不提供安全检查。您可以确保这些图像在应用程序中可用。

<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>

【参考方案2】：

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

只需在密钥中使用图像名称，就可以了。