文档清楚地表明你不能做任何动态要求： // GOODImage source={require('./my-icon.png')} /// BADvar icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';Image source={require('./' + icon + '.png')} /// GOODvar icon
// GOOD
<Image source={require('./my-icon.png')} />
// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />
// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />
我有一个不那么剪切和干燥的用例,但我有一个ListView,并且在renderRow方法中我想根据所述行中的一些数据渲染一个Image.例如,我想通过这样做来渲染../img/12.png
<Image style={styles.thumb} source={require("../img/12.png")} />
然而,工作正常
let imagePath = "../img/" + row.number + ".png"; // row.number being 12
<Image style={styles.thumb} source={require(imagePath)} />
给出以下错误：
Requiring unknown module "../img/12.png"
这里是否有任何解决方法,似乎它仍然需要完全相同的字符串,它只是不起作用
好吧,我想通了,并认为我会发布一个答案,以防将来有人遇到这种困难.答案是您需要明确要求所有图像,否则它们将不会被捆绑,因此未知模块错误.
解：在一个单独的文件中,我创建并导出了一个按数字键入的对象,其值为require(“../ img / x.png”),其中x是键.然后在我的ListView的renderRow方法中,我通过使用row.number键入图像从对象中拉出图像