React Native中FlatList组件内ImageBackground使用动态路径加载图片报'invalid call'错误

这个问题我之前也碰到过，核心原因在于React Native的require()对本地资源是静态解析的——打包工具（比如Metro）在编译阶段就需要明确知道图片的路径，没法识别变量形式的路径，所以直接传item.url_img这种变量就会触发invalid call错误。

为什么静态路径能正常工作？ #

当你写require('./../assets/galaxy.jpg')这种字符串字面量时，Metro能直接解析这个路径，在打包时就把对应的图片资源处理好，所以不会报错。

解决方案：用映射表管理本地图片 #

如果你的图片都是本地资源，而且能提前知道所有可能的路径，可以先创建一个图片映射表，把路径和对应的require()结果关联起来，然后在renderItem里通过item.url_img去匹配：

// 先在组件顶部或者外部定义图片映射表
const imageMap = {
  './../assets/galaxy.jpg': require('./../assets/galaxy.jpg'),
  // 把所有需要用到的本地图片路径都加在这里
};

// 修改后的FlatList代码
<FlatList 
  horizontal={true} 
  showsVerticalScrollIndicator={false} 
  showsHorizontalScrollIndicator={false} 
  data={this.state.newDataCards} 
  keyExtractor={(item) => item.id.toString()} 
  renderItem={({item}) => {
    return (
      <TouchableHighlight onPress={() => alert(item.description)}>
        <View style={styles.card_container}>
          <ImageBackground 
            source={imageMap[item.url_img]} 
            style={styles.card_image} 
            imageStyle={{ borderRadius: 6, resizeMode: 'contain' }} 
          >
          </ImageBackground>
        </View>
      </TouchableHighlight>
    )
  }} 
/>

注意事项 #

• 确保item.url_img的字符串和imageMap里的key完全一致，包括相对路径的写法、大小写（iOS系统路径大小写不敏感，但Android敏感，建议统一保持一致）。
• 如果你的图片是网络资源，不需要用require()，直接传{ uri: item.url_img }给source即可。

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