Loops RN平面列表循环变量

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>

    )
}

renderItem=（{item，i}）=>{
让imgName=item[0]。image？item[0]。image:'bekleidung_fo.png'；
设imgPath=require（`.././Images/category_Images/${item[0].id}/${imgName}`）；
log（`.././Images/category_Images/${item[0].id}/${imgName}`）；
返回(
this.openCategory（item）}
>
{item[0]。title}
)
}
render（）{
设{data}=this.state；
返回(
索引}
numColumns={4}
getItemLayout={（数据，索引）=>(
{长度：宽度*.5，偏移量：宽度*.2*索引，索引}
)}
RemoveClipped子视图
columnWrapperStyle={{width:width*.2}}
renderItem={this.renderItem}
/>
)
}

*在数据中，我有一个对象，它具有id、标题、图像（不是全部）。。。。。。我试图从这个对象中获取每个项目ID和图像名称，为我的本地图像创建路径，并将其显示到图像背景组件中的平面列表（因为它没有为图像提供远程URI或其他内容），但是我在Android上得到了编译错误和语法：）在IOS上的错误和它所有关于ES6模板字符串语法的错误

。/../Images/category_Images/${item[0].id}/${imgName}

*

在我看来，这可能与渲染有关

---

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

引用捆绑包中的映像的唯一方法是在源代码中直接写入require（“资产”）

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

};

setParh（图像标题）{
开关（图像标题）{
蜘蛛侠一案：
返回require（'../../Images/category_Images/spiderman.png'）；
案例“超人”：
返回require（'../../Images/category_Images/superman.png'）；
“猫女”一案：
返回require（'../../Images/category_Images/catWoman.png'）；
}
}
renderItem=（{item}）=>{
返回(
{item[0]。title}
)
};

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

引用捆绑包中的映像的唯一方法是在源代码中直接写入require（“资产”）

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

};

setParh（图像标题）{
开关（图像标题）{
蜘蛛侠一案：
返回require（'../../Images/category_Images/spiderman.png'）；
案例“超人”：
返回require（'../../Images/category_Images/superman.png'）；
“猫女”一案：
返回require（'../../Images/category_Images/catWoman.png'）；
}
}
renderItem=（{item}）=>{
返回(
{item[0]。title}
)
};

是的，你是对的。问题是你不能动态地要求静态资产，必须知道完整路径名。这是指向其他人答案的链接。试试看是的，你是对的。问题是你不能动态地要求静态资产，必须知道完整路径名。这是指向其他人答案的链接。试试看