解决方法

Question

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

var image = ...

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

如果我对source={image2}行发表评论，则可以在图片代码中使用if request.method == "POST": form = XXXXForm(request.POST,request.FILES) if form.is_valid(): docfile=request.FILES['docfile']

。

我检查过，两个字符串完全相同。有什么想法吗？

Answer 1

解决方法

也许这Issue可以帮到你。

我们故意不支持动态生成的图片名称，因为随着时间的推移很难管理资产，就像你不想做的那样 var MyComponent = require（'./'+ libName + typeOfComponent）; 或类似的东西。像这样生成动态图像名称将无法使用我们正在推出的新动态资产管理系统让你只使用cmd + R即可添加和更新资产（不再需要添加到Xcode并重新编译）。

捆绑图像

您要使用的图片需要“通过Xcode资产目录或Android drawable文件夹”捆绑，作为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>

Answer 2

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

只需在按键中使用图像名称，即可。

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

2 个答案:

解决方法

捆绑图像

替代