javascript - 无法迭代 React Native 中的本地资源

Question

我正在尝试渲染图像的 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} />

Answer 1

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