Отображение изображений из массива имён файлов с помощью React native Flatlist

Question

Я создал файл фиктивных данных под названием avatars в папке assets / dummy-data / Avatars.ts.

      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({})

И это ошибка, которую я получаю: Снимок экрана с ошибкой

Спасибо

Answer 1

Динамические изображения не поддерживаются в React Native. В настоящее время поддерживаются только ресурсы статических изображений, поскольку имя изображения в требовании должно быть известно статически.

      // 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]} />

Надеюсь, это вам поможет. Не стесняйтесь сомневаться.