RN FlatList 循环变量答案

【问题标题】：RN FlatList loop variablesRN FlatList 循环变量
【发布时间】：2020-01-22 04:20:22
【问题描述】：

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(not all)......我正在尝试获取每个项目ID 和 IMAGE 名称，并为我的本地图像创建 PATH 并将其显示到 ImageBackground 组件中FlatList （因为它没有给我远程 URI 或其他图像），但我在 Android 和语法上遇到编译错误 :) IOS 上的错误及其全部关于 ES6 模板字符串语法../../Images/category_images/${item[0].id}/${imgName} *

我认为可能与渲染有关

【问题讨论】：

是的，你是对的。问题是你不能动态地要求静态资产，必须知道完整的路径名。这里是其他人答案的链接。试试stackoverflow.com/a/42245762/7364894

标签： loops react-native variables require react-native-flatlist

【解决方案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>
    )

};

【讨论】：