如果渲染项返回 null，则处理 numcolumn 大于 2 的平面列表答案

【问题标题】：Handling flatlist with numcolumn more than 2 if render Item returns null如果渲染项返回 null，则处理 numcolumn 大于 2 的平面列表
【发布时间】：2021-11-02 08:11:33
【问题描述】：

<FlatList
    data={["1","2","1","2","1","2","1","2","1","2","1","2","1","2",]}
    renderItem={
      ({ item }) => {
        if(item==="1"){
          return(
            <View style={styles.box}>
                <Text>{item}</Text>
            </View>)
        }
      }
    }
    numColumns={2}
    columnWrapperStyle={{justifyContent:'space-around'}}
/>

这是我的代码，我的目标是使结果与以下内容相同：

<FlatList
    data={["1","1","1","1","1","1","1"]}
    renderItem={
      ({ item }) => {
        if(item==="1"){
          return(
            <View style={styles.box}>
            <Text>{item}</Text>
            </View>)
        }
      }
    }
    numColumns={2}
    columnWrapperStyle={{justifyContent:'space-around'}}
/>

我正在努力解决这个问题，但在 google 或 StackOverflow 上找不到任何答案。我怎样才能做到这一点？

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

如果我理解正确，您希望第一个代码片段呈现与第二个代码片段相同的 UI，即仍然有 2 列。如果这是所需的行为，您可以在将数据提供给 FlatList 之前对其进行过滤：

<FlatList
    data={["1","2","1","2","1","2","1"].filter(element => element === "1")}
    ...

或者，您可以渲染一个空的 View 来代替不符合您的条件的元素（在这种情况下，您将有 2 列，其中包含 !== "1" 的元素的“空”单元格):

<FlatList
    data={["1","2","1","2","1","2","1","2","1","2","1","2","1","2",]}
    renderItem={
          ({ item }) => {
            if (item === '1'){
              return (
                <View style={styles.box}>
                  <Text>{item}</Text>
                </View>)
            } else {
              return <View/>
            }
          }
        }
    ...

【讨论】：