Элемент FlatList для изображения в React Native

Question

Я пытаюсь l oop через JSON и для каждого элемента загружаю изображение, но получаю синтаксическую ошибку.

const WizardContainer = props => {
    ImagePathItems = [
        { path: '../../resources/svg/wizard-r.png', txtValue: "1" },
        { path: '../../resources/svg/wizard-c.png', txtValue: "2" },
        { path: '../../resources/svg/wizard-s.png', txtValue: "3" },
        { path: '../../resources/svg/wizard-d.png', txtValue: "4" }];
    return (
        <View style={styles.a}>
            <View style={styles.b}>
                <View style={styles.c}>
                    <FlatList
                        horizontal
                        data={ImagePathItems}
                        renderItem={({ item }) =>
                            <Image
                                style={styles.tinyLogo}
                                //source={require('../../resources/svg/wizard-d.png')}
                                source={require({ item.path })} //SYNTAX ERROR
                            />
                        }
                        keyExtractor={item => item.txtValue}
                    />
                </View>
            </View>
        </View>
    );
};

export default WizardContainer;

Если я дискомментирую предыдущую строку, загрузите изображение в порядке

Answer 1

Измените ImagePathItems массив и Image источник, как это

const WizardContainer = props => {
ImagePathItems = [
    { path: require('../../resources/svg/wizard-r.png'), txtValue: "1" },
    { path: require('../../resources/svg/wizard-c.png'), txtValue: "2" },
    { path: require('../../resources/svg/wizard-s.png'), txtValue: "3" },
    { path: require('../../resources/svg/wizard-d.png'), txtValue: "4" }];
return (
    <View style={styles.a}>
        <View style={styles.b}>
            <View style={styles.c}>
                <FlatList
                    horizontal
                    data={ImagePathItems}
                    renderItem={({ item }) =>
                        <Image
                            style={styles.tinyLogo}
                            source={item.path}
                        />
                    }
                    keyExtractor={item => item.txtValue}
                />
            </View>
        </View>
    </View>
   );
};

export default WizardContainer;

Answer 2

Вы не можете использовать require с переменными, потому что jsbundler запущен во время сборки, он не может определить, какие модули объединить, если имя - это переменная c Dynami.

Итак, если вы действительно хотите использовать переменную для импорта пути с требованием, вы можете использовать синтаксис вроде this . Добавление частичной строки statii c в require может заставить его работать.

var restOfThePath = 'svg/wizard-r.png'

require('../../resources/' + restOfThePath)

Или вы можете просто require их в объекте, а затем использовать объект в своем коде.

Также использование { внутри вашего require является причиной синтаксической ошибки. Если вы удалите его, то ошибка go исчезнет.

. .

const WizardContainer = props => {
    ImagePathItems = [
        { path: require('../../resources/svg/wizard-r.png'), txtValue: "1" },
        { path: ('../../resources/svg/wizard-c.png'), txtValue: "2" },
        { path: ('../../resources/svg/wizard-s.png'), txtValue: "3" },
        { path: ('../../resources/svg/wizard-d.png'), txtValue: "4" }];
    return (
        <View style={styles.a}>
            <View style={styles.b}>
                <View style={styles.c}>
                    <FlatList
                        horizontal
                        data={ImagePathItems}
                        renderItem={({item}) =>
                            <Image
                                style={styles.tinyLogo}
                                source={item.path}
                            />
                        }
                        keyExtractor={item => item.txtValue}
                    />
                </View>
            </View>
        </View>
    );
};

export default WizardContainer;

Answer 3

Можете ли вы попробовать поместить require в объект данных:

{path: require('../../resources/svg/wizard-r.png'), txtValue: 1}

А затем в своем коде вы можете просто указать

<Image source={(item.path)} />

Это работает?