Переменные цикла RN FlatList - PullRequest
Новая
       51

Переменные цикла RN FlatList

1 голос
/ 21 сентября 2019

** React Native FlatList неправильно работает с переменными цикла *** **

    renderItem = ({ item, i }) => {
    let imgName = item[0].image ? item[0].image : 'bekleidung_fo.png';
    let imgPath = require(`../../Images/category_images/${item[0].id}/${imgName}`);
    console.log(`../../Images/category_images/${item[0].id}/${imgName}`);
    return (
        <View key={i} style={styles.itemContainer}>
            <TouchableOpacity
                activeOpacity={.9}
                onPress={() => this.openCategory(item)}
            >
                <ImageBackground
                    source={imgPath}
                    style={styles.image}
                    resizeMode='contain'
                >
                    <View style={styles.textContainer}>
                        <Text style={{textAlign:'center'}} numberOfLines={4}>
                            {item[0].title}
                        </Text>
                    </View>
                </ImageBackground>
            </TouchableOpacity>
        </View>
    )

}

render() {
    let {data} = this.state;
    return (
        <View style={styles.mainContainer}>
            <FlatList
                contentContainerStyle={styles.container}
                data={data}
                keyExtractor={(item, index) => index}
                numColumns={4}
                getItemLayout={(data, index) => (
                    {length: width * .5, offset: width * .2 * index, index}
                )}
                removeClippedSubviews
                columnWrapperStyle={{width:width * .2}}
                renderItem={this.renderItem}
            />
            <View style={styles.bottomBox}/>
        </View>

    )
}

* в данные, у меня есть объекты, которые имеют id, title, image (не все) ...... я пытаюсь получить каждый элемент ID и ИЗОБРАЖЕНИЕ имя из этого объекта и сделать ПУТЬ для моих локальных изображенийи показать его в ImageBackground компонент в FlatList (потому что он не дает мне удаленный URI или что-то еще для изображения), но я получаю ошибку компиляции на Android и синтаксис:) ошибка в IOS и все о синтаксисе строки шаблонов ES6 ../../Images/category_images/${item[0].id}/${imgName} *

на мой взгляд, может быть, это связано с render

1 Ответ

0 голосов
/ 21 сентября 2019

Динамические пути в require в настоящее время не поддерживаются.

Единственный допустимый способ ссылки на изображение в пакете - это буквальная запись require ('asset') в источник.

Youможет использовать оператор switch для реализации этого. 

setParh(imageTitle) {
  switch (imageTitle) {
    case 'spiderman':
      return require('../../Images/category_images/spiderman.png');
    case 'superman':
      return require('../../Images/category_images/superman.png');
    case 'catWoman':
      return require('../../Images/category_images/catWoman.png');
  }
}

renderItem = ({ item }) => {
    return (
        <Image
             source={this.setParh(item.imageTitle)}
             style={[styles.image,
             resizeMode='contain'
        >
         {item[0].title}
        </Image>
    )

};
...