ios - 名称中的 React native 图像变量不起作用

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

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

Answer 1

解决方法

也许这个Issue可以帮助你。

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 Assets 目录或 Android 可绘制文件夹”捆绑，如 documentation says .您还必须手动指定图像的尺寸。

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 语句？

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