React Native Image。如何根据输入道具渲染特定图像？

Question

在我的React Native应用中，我有一个组件，它包含了一个 "图像"。Image 其 source 我想依赖一个输入道具。我试过以下两种方法。

<Image source={require('@images/'+this.props.image+'.png')}/>

和

<Image source={require(this.props.image === 'a' ? '@images/a.png' : '@images/b.png')}/>

但都抛出错误。谁能告诉我这两段代码有什么问题？我唯一能想到的其他解决方案是

<Image source={require(this.props.image)}/>

并将图片的路径名作为一个道具传入，但我认为有一个更干净的解决方案。

Answer 1

你看到这样的错误是因为根据React -Native的规定，所有的图像源都需要在编译你的bundle之前被加载。你可以了解更多关于 图片

你可以用下面的方法解决这个问题

let icon = this.props.image === 'a'
    ? require('./images/a.png')
    : require('./images/a.png');

<Image source={icon} style={{ width: 40, height: 40 }} />;

希望对你有所帮助。如有疑问，请随时提出。

Answer 2

在react native中是没有办法动态加载静态图片的。所以，你必须加载所有你想使用的静态图片。为此，你可以创建一个变量来保存图片，你可以在加载后使用它。比如说:

const imageA = require('@images/a.png');
const imageB = require('@images/b.png');

然后，当你想使用图像。

<Image source={this.props.image === 'a' ? imageA : imageB )}/>

注意：你必须加载所有你想使用的图片。