我正在尝试渲染图像的 ScrollView,如下所示:
renderIcons()
{
let activityImages= ['all','boat','camping','climbing','cycling','hiking','running','swimming','yoga'];
let icons = activityImages.map((image, index) => {
return (
<TouchableWithoutFeedback key={index} onPress={() => {}}>
<View style={styles.imageWrap}>
<Image style={styles.imageDefault} source={require(`../../assets/activities/${image}.png`)} />
</View>
</TouchableWithoutFeedback>
);
});
return icons;
}
并在渲染方法中:
render() {
return (
<View style={styles.container}>
<ScrollView
style={styles.scrollContainer}
horizontal={true}
>
{this.renderIcons()}
</ScrollView>
</View>
);
}
资源文件夹中的每一项都是具有相应文件名的图像。
当我运行这个时,我收到错误: 需要未知模块“../../assets/activities/all.png”。
一开始我以为是文件路径不正确,但是当我将图像的来源更改为:
source={require('../../assets/activities/all.png')}/>
,all.png 正确渲染了 8 次(数组长度),没有任何错误。有人遇到过类似的问题吗?
编辑:
最好的解决方案可能是字典(github issue 和 comment )
const iconsMap = {'burger-menu': require('../img/burger-menu.png')};
// this.props.icon = 'burger-menu'
<Image src={iconsMap[this.props.icon} />
最佳答案
根据react-native docs ,为了使其工作,必须静态地知道 require 中的图像名称。
// 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} />
关于javascript - 无法迭代 React Native 中的本地资源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38680183/