Question

我有包含图像的数组。我想给平面图片展示图像现在一切正常。但是我想展示其中的一些，我的意思是如果条件为真，则显示该图像。

这是我的代码：

 renderItem={ ({ item }) => 
 {
    if (true) {
            <View style={{ width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' }} >

              <TouchableOpacity onPress={() => this.props.navigation.navigate('DescriptionPage', { data: item.call })}>
                <ImageBackground source={item.img} style={{ width: 60, height: 60 }} />
              </TouchableOpacity>

            </View>
          }
          else {
                ...
              }

        }
}

如果我这样使用，则没有错误，它会显示所有图像。

<FlatList 
    data={images}
    keyExtractor={(item, index) => index.toString()}
    numColumns={4}
    renderItem={ ({ item }) => 

    <View style={{ width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' }} >

      <TouchableOpacity onPress={() => this.props.navigation.navigate('DescriptionPage', { data: item.call })}>
        <ImageBackground source={item.img} style={{ width: 60, height: 60 }} />
      </TouchableOpacity>

    </View>


}
   />

这里有个错误，我不知道为什么：

{ 如果是真的） { ... } 其他 { ... } }

Answer 1

如果其他条件，您忘了在其中添加退货：

这样做：

renderItem={ ({ item }) => 
{
   if (true) {
     // add return
     return(
      <View style={{ width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' }} >

      <TouchableOpacity onPress={() => this.props.navigation.navigate('DescriptionPage', { data: item.call })}>
        <ImageBackground source={item.img} style={{ width: 60, height: 60 }} />
      </TouchableOpacity>

    </View>
     )

         }
         else {
           // add return
              return(
                ...
              )
             }

       }
}

Answer 2

只需使用这种设置：

return (isTrue) ? 
<TouchableOpacity onPress={() => this.props.navigation.navigate('DescriptionPage', { data: item.call })}>
   <ImageBackground source={item.img} style={{ width: 60, height: 60 }} />
</TouchableOpacity> : null;

这应该渲染该组件，如果它是true，否则它将不渲染任何东西。

在FlatList中如何使用

2 个答案: