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

Question

<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'}}
/>

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

标签： react-nativereact-native-flatlist

Answer 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/>
            }
          }
        }
    ...