FlatList中动态require图片路径调用Image组件打包失败问题求助

报错根因 #

React Native 中的 require 属于编译期处理的静态资源引入语法，不支持传入动态变量作为路径参数。你代码中的 item.img 是运行时才会解析的数组项属性，打包阶段无法识别具体路径，因此触发打包失败错误。

修复方案 #

直接在定义菜单数组的阶段完成所有静态图片的 require 操作，不要存储路径字符串，渲染时直接传入预加载的资源即可，修改后代码如下：

class FileMenu extends Overlay {
    constructor(props) {
        super(props, null, null)
        this.state = {visible: false, menuItems: [
            {   
                name:'Rename',
                img: require('./img/renameFile.png')
            },
            {
                 name: 'Move',
                 img: require('./img/moveFile.png')
            }         
        ]}
    }

    renderMenuItem({item, index}) {
        return <View style={styles.container}>
        <Text style={styles.items}>{item.name}</Text>
        <Image
           source={item.img}
           style={{ width:'30%', height:'30%' }}
        />
        </View>
    }
    onBackdropPress() {
        this.setState({visible: false})
    }
    render() {
       return <Overlay style={styles.overlay} isVisible={this.state.visible}
                       onBackdropPress={this.onBackdropPress.bind(this)}>                     
                   <FlatList data={this.state.menuItems} 
                       renderItem={this.renderMenuItem.bind(this)} 
                       keyExtractor={(item, index) => `${index}`}>
                   </FlatList>
                 <TouchableOpacity
                 onPress={this.onBackdropPress.bind(this)}
                      style={styles.button}>                    
                      <Text>X</Text>
                </TouchableOpacity>
             </Overlay>
    }
}

export {FileMenu}

内容的提问来源于stack exchange，提问作者TEQZ