名称中的React native Image变量不起作用 [英] React native Image variable in name doesn't work

问题描述

我正在尝试加载一个在其源代码中有变量的图像，如下所示。

I'm trying to load an image that has a variable in it's source, something like this.

<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

I get the following error (thrown when trying to set variable image) : Requiring unknown module "../../assets/img/ambiances/icons/chic.png"

如果我评论 var image = ... 行，它在Image标签中的 source = {image2} 下工作正常。

If I comment the var image = ... line, it works fine with source={image2} in the Image tag.

我查了一下，两个字符串完全相同。有什么想法？

I checked, both strings in the are exactly the same. Any ideas ?

推荐答案

解决方法

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

我们故意不支持动态生成的图像名称，因为它会使管理资产变得非常困难，就像你不想做的那样
var MyComponent = require（'./ '+ libName + typeOfComponent）;
或类似的东西。像这样的动态图像名称生成
将无法使用新的动态资产管理系统我们正在滚动
out让你只需cmd + R
就可以动态添加和更新资产（不再需要添加到Xcode并重新编译）。

We intentionally don't support dynamically generated image names because it makes it very hard to manage assets over time, just like how you wouldn't want to do var MyComponent = require('./' + libName + typeOfComponent); or something like that. Dynamic image name generation like this also won't work with the new dynamic asset managing system we're rolling out which let's you add and update assets on the fly with just cmd+R (no more need to add to Xcode and recompile).

捆绑图像

您要使用的图像需要通过Xcode资产目录或Android可绘制文件夹捆绑，如文档说。此外，您必须手动指定图像的尺寸。

Bundled Images

The images you want to use, need to be bundled "via Xcode asset catalogs or Android drawable folder", as the documentation says. Also you have to specify the dimensions of the images manually.

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

Note that this approach provides no safety checks. It's up to you to guarantee that those images are available in the application.

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

Alternative

What do you think about using a switch- or if-statement?

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

这篇关于名称中的React native Image变量不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！