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

Question

Image在我的 React Native 应用程序中，我有一个组件，其中包含一个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，您的所有图像源都需要在编译包之前加载。您可以了解有关图像的更多信息

您可以使用以下方法解决此问题

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

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

希望这对您有所帮助。随意怀疑。

Answer 2

无法在本机反应中动态加载静态图像。因此，您必须加载所有要使用的静态图像。为此，您可以创建一个保存图像的变量，您可以在加载后使用它。例如：

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

然后，当您想使用图像时：

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

注意：您必须加载所有要使用的图像。