FlatList渲染多图时如何将存储图片路径的prop传递给Image的source属性

问题核心原因 #

React Native 中的 require 是静态编译执行的，打包阶段就必须确定资源路径，不支持传入动态变量作为路径参数，所以直接写 require(inputPhotoLocation) 无法正常加载资源。另外你现有代码还存在语法错误：source 是 Image 组件的独立属性，你误把它写到了 style 配置对象中，也会导致加载失败。

解决步骤 #

1. 修改存储路径列表的文件，不要直接存储字符串路径，改为提前执行 require 导出资源引用：

// 原错误的路径列表写法
export const imagePaths = [
  './assets/GroupImages/football.jpg',
  '../assets/GroupImages/valley.jpg',
  '../assets/GroupImages/usa.jpg',
  '../assets/GroupImages/playstation.jpg',
  '../assets/GroupImages/pc.jpg'
]

// 修改后的正确写法
export const imageResources = [
  require('./assets/GroupImages/football.jpg'),
  require('../assets/GroupImages/valley.jpg'),
  require('../assets/GroupImages/usa.jpg'),
  require('../assets/GroupImages/playstation.jpg'),
  require('../assets/GroupImages/pc.jpg')
]

2. 父组件传递 inputPhotoLocation prop时，直接传上述 imageResources 数组中对应元素即可，不需要传字符串路径。
3. 修正组件代码的语法错误，调整 source 属性的位置，同时修复 AppText 的 onPress 直接执行的问题：

function SelectionBoxComponent({inputPhotoLocation, inputText, onPress}) {
    return (
        <TouchableWithoutFeedback onPress={onPress}>
            <View style={styles.box}>
                <View style={styles.circularPhoto}>
                    {/* source移到style外面作为Image独立属性 */}
                    <Image 
                        style={{
                            height:"100%", 
                            width:"100%", 
                            borderRadius:70,
                            borderWidth:0
                        }} 
                        source={inputPhotoLocation} 
                    />
                </View>
                {/* onPress包一层箭头函数，避免渲染时直接执行log */}
                <AppText style={styles.textStyle} onPress={() => console.log(inputText)} >
                    {inputText}
                </AppText>
            </View>
        </TouchableWithoutFeedback>
    )
}

可选兼容方案 #

如果必须要存储字符串路径，可以额外建立路径到资源引用的映射表使用：

const imageResourceMap = {
  './assets/GroupImages/football.jpg': require('./assets/GroupImages/football.jpg'),
  '../assets/GroupImages/valley.jpg': require('../assets/GroupImages/valley.jpg'),
  // 补充其余路径的映射
}

// 组件内使用时写为 source={imageResourceMap[inputPhotoLocation]} 即可

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