使用 react native Flatlist 显示来自文件名数组的图像

Posted 2023-02-16

【中文标题】使用 react native Flatlist 显示来自文件名数组的图像

【英文标题】：Showing images from an array of file names using react native Flatlist

【发布时间】：2021-12-19 23:10:06

【问题描述】：

我在 assets/dummy-data/Avatars.ts 文件夹中创建了一个名为 avatars 的虚拟数据文件。

export default [
    id: 1, levels: ["pichu", "picachu", "raichu"],
    id: 2, levels: ["charmander", "charmeleon", "charizard"],
    id: 3, levels: ["totodile", "croconaw", "feraligatr"],
    id: 4, levels: ["squirtle", "wartortle", "blastoise"],
    id: 5, levels: ["bulbasaur", "ivysaur", "venusaur"],
    id: 6, levels: ["cyndaquil", "quilava", "typhlosion"],
    id: 7, levels: ["pidgey", "pidgeotto", "pidgeot"],
    id: 8, levels: ["turtwig", "grotle", "torterra"],
    id: 9, levels: ["igglybuff", "jigglypuff", "wigglytuff"],
    id: 10, levels: ["cleffa", "iclefairy", "clefable"],
    id: 11, levels: ["litten", "torracat", "incineroar"],
    id: 12, levels: ["nidoran", "nidorina", "vnidoqueen"],
]

我想要做的是将这些数据加载到另一个文件中，然后用它们制作一个 Flatlist 组件。我的代码是：

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

const OnboardingScreen = () => 
    const test = "charizard"
    console.log(Avatars)
    return (
        <View>
            <FlatList
                data = Avatars
                renderItem = 
                    (item) =>
                        (
                            <Image source=require(`../assets/images/avatars/$item.levels[0]pichu.jpg`) />
                        )
                
            />
        </View>
    )


export default OnboardingScreen

const styles = StyleSheet.create()

这是我得到的错误： Screen capture of the error

谢谢

【问题讨论】：

您在最后添加了 pichu.jpg，我认为这是导致问题的原因。如果删除它不能修复它然后尝试控制台记录您提供给 Image 的路径并确保其正确

【参考方案1】：

React Native 不支持动态图像。目前只支持static image resources，因为require中的图片名必须是静态已知的。

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source=require('./' + icon + '.png') />

// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source=icon />

为了解决您的问题，请更改您的头像数据，如下所示

export default [
    
        id: 1, levels: [
            require('./assets/images/avatars/pichu.jpg'),
            require('./assets/images/avatars/picachu.jpg'),
            require('./assets/images/avatars/raichu.jpg')
        ]
    ,
    
        id: 2, levels: [
            require('./assets/images/avatars/charmander.jpg'),
            require('./assets/images/avatars/charmeleon.jpg'),
            require('./assets/images/avatars/charizard.jpg')
        ]
    ,
]

然后你可以渲染你的图像

<Image source=item.levels[0] />

希望这对您有所帮助。如有疑问，请随意。