RN FlatList 循环变量

Question

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>

    )
}

*into data 我有一个对象有一个 id,title,image(not all)......我正在尝试获取 each 项目 ID 和 IMAGE 名称来自这个对象并为我的本地创建 PATH图像并将其显示到 ImageBackground 组件到 FlatList 中（因为它不给我远程 URI 或其他图像），但我我在 Android 和语法上遇到编译错误 :) IOS 上的错误及其所有关于 ES6 模板字符串语法 ../../Images/category_images/${item[0].id}/${imgName} *

for my opinion maybe it related with render

Answer 1

当前不支持 require 中的动态路径

引用包中图像的唯一允许方法是在源代码中逐字编写 require('asset')。

您可以使用 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>
    )

};

RN FlatList 循环变量

RN FlatList loop variables

variables

loops

require

react-native

react-native-flatlist