使用动态名称反映本机映像

Question

这没问题:

<Image source={require('./images/ace.png')} />

但是这个:

var name = 'ace';

<Image source={require('./images/' + name + '.png')} />

我尝试了各种变化,但它总是返回错误:

需要未知模块"./images/ace.png".如果您确定该模块在那里,请尝试重新启动打包器.

Answer 1

根据反应本机文档，

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

预先声明需要什么并有条件地使用它怎么样？

Answer 2

尝试使用网址

<Image
    style={styles.img}
    resizeMode={'contain'}
    source={{uri: imageURL}}>

在 imageURL 中，它可能是一个 URL

例如

var imageURL = 'http://assets22.pokemon.com/assets/cms2/img/pokedex/full/702.png'