React Native使用FlatList通过文件名数组渲染图片报错如何解决

问题原因 #

• React Native 的 require 不支持动态路径拼接：所有 require 引入的静态资源都会在打包阶段提前处理，不会等到运行时再解析变量拼接的路径，你在require中使用模板字符串插入变量的写法本身就不被框架支持。
• 代码存在语法和逻辑错误：模板字符串中${{item}.levels[0]}多了一层不必要的大括号，同时你还额外拼接了固定字符串pichu，最终生成的路径完全不符合预期。

解决方法 #

方案1：在模拟数据中提前引入对应图片（最稳定，推荐） #

直接修改assets/dummy-data/Avatars.ts文件，给每一项提前预引入对应等级的图片：

export default [
    {
        id: 1, 
        levels: ["pichu", "picachu", "raichu"],
        // 提前引入所有对应等级的图片
        images: [
            require('../assets/images/avatars/pichu.jpg'),
            require('../assets/images/avatars/picachu.jpg'),
            require('../assets/images/avatars/raichu.jpg'),
        ]
    },
    // 剩余的11项按照相同规则补全即可
]

之后在组件中直接取用提前引入好的资源：

import { StyleSheet, View, FlatList, Image } from 'react-native'
import Avatars from '../assets/dummy-data/Avatars'

const OnboardingScreen = () => {
    return (
        <View>
            <FlatList
                data={Avatars}
                renderItem={({item}) => (
                    // 取索引0对应第一等级的图片，按需修改索引即可拿到对应等级的头像
                    <Image source={item.images[0]} />
                )}
            />
        </View>
    )
}

export default OnboardingScreen

const styles = StyleSheet.create({})

方案2：原生资源目录+uri加载 #

如果不想修改模拟数据，可以把所有头像图片放到安卓的android/app/src/main/res/drawable目录、iOS的Image Assets中，之后用uri方式加载：

<Image source={{uri: item.levels[0]}} style={{width: 100, height: 100}} />

注意该方案必须给Image组件指定明确宽高，否则图片无法正常显示

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