React Native：FlatList渲染网络数组图片报错，如何正确调用？

错误原因 #

React Native的require()只能接收静态字符串路径，用来加载本地项目内的图片资源——打包工具会提前扫描这些静态路径并完成资源打包。而你从API获取的是网络图片的完整URL，既不需要用require，也不能用require动态传入变量（这就是报错的直接原因）。

正确写法 #

直接将网络URL作为uri传入Image的source属性即可：

<FlatList
    style={styles.flatView}
    data={data}
    keyExtractor={(item)=>item.id}
    numColumns={2}
    columnWrapperStyle={styles.flatRow}
    renderItem={({item})=>(
        <View style={styles.itemView}>
           <Image style={styles.image} source={{ uri: item.image }} />
           <View>
                <Text style={styles.title}>{item.title}</Text>
                <Text style={styles.harga}>{item.price}</Text>
                <Text style={styles.type}>{item.category}</Text>
           </View>
        </View>
    )}
>
</FlatList>

补充说明 #

如果后续需要加载本地图片，必须确保require的参数是静态字符串，示例如下：

// 正确写法
<Image source={require('./assets/image.png')} />

// 错误写法（动态变量无法被打包工具识别）
const imgPath = './assets/image.png';
<Image source={require(imgPath)} />

内容的提问来源于stack exchange，提问作者Ekatama Ilham Prayoga