React Native FlatList设置numColumns时renderItem返回null如何实现正常布局

你遇到的布局问题根源是：FlatList 开启多列（numColumns）布局时，会严格按照传入的 data 数组顺序分配每一列的位置，你在 renderItem 中对值为"2"的项返回空值时，该列位置会被预留占位，不会自动被后续的有效项填充，自然就会出现空白间隙、布局错位的问题。

方案1（推荐首选）：预处理数据源 #

直接在传入 FlatList 前过滤掉不需要渲染的项，该方案性能最优，布局效果和你给出的预期代码完全一致，示例如下：

<FlatList
    // 过滤仅保留需要渲染的项
    data={["1","2","1","2","1","2","1","2","1","2","1","2","1","2",].filter(item => item === "1")}
    renderItem={({ item }) => (
      <View style={styles.box}>
          <Text>{item}</Text>
      </View>
    )}
    numColumns={2}
    columnWrapperStyle={{justifyContent:'space-around'}}
/>

方案2（仅用于需保留原始数据源索引的特殊场景）：零尺寸占位 #

如果你的业务逻辑必须保留原始 data 数组的索引（比如行号关联、滑动定位等需求），可以对不需要渲染的项返回零宽高的透明占位元素，避免占用布局空间，示例如下：

<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>)
        }
        // 无效项返回零尺寸占位，不影响正常布局
        return <View style={{ width: 0, height: 0, flex: 0, opacity: 0 }} />
      }
    }
    numColumns={2}
    columnWrapperStyle={{justifyContent:'space-around'}}
/>

内容的提问来源于stack exchange，提问作者boriii