React Native如何实现可横向滚动的双行排列列表？

基于FlatList的原生实现方案 #

FlatList本身可以支持该需求，不需要额外引入第三方组件，只需对数据源做简单分组处理即可，核心实现逻辑如下：

• 第一步：将一维数据源按2个元素为一组转换为二维数组，相当于把横向滚动的每一列视为一个FlatList渲染单元，每个单元内部垂直排列2个条目
  示例分组代码：

  const formatListData = (originData) => {
    const groupedData = []
    for(let i = 0; i < originData.length; i += 2) {
      groupedData.push([originData[i], originData[i+1] || null])
    }
    return groupedData
  }
  

• 第二步：配置FlatList属性实现横向滚动、双行布局
  核心配置项：
  1. 开启horizontal={true}属性设置横向滚动
  2. renderItem方法中对每组的2个条目做垂直布局，若第二个元素为null可渲染等宽高的占位容器保持布局一致性
  3. 加载更多逻辑直接复用FlatList原生的onEndReached、onEndReachedThreshold属性即可，和普通列表的加载更多实现完全一致
     完整示例代码：

  import { FlatList, View, Text, StyleSheet } from 'react-native'
  
  const TwoRowHorizontalList = ({ data, onLoadMore }) => {
    // 处理后的分组数据源
    const groupedData = formatListData(data)
  
    const renderGroupItem = ({ item }) => {
      return (
        <View style={styles.groupContainer}>
          {/* 第一行条目 */}
          <View style={styles.itemCard}>
            <Text>{item[0].title}</Text>
          </View>
          {/* 第二行条目，为空时渲染占位 */}
          {item[1] ? (
            <View style={styles.itemCard}>
              <Text>{item[1].title}</Text>
            </View>
          ) : <View style={styles.itemPlaceholder} />}
        </View>
      )
    }
  
    return (
      <FlatList
        horizontal
        data={groupedData}
        renderItem={renderGroupItem}
        keyExtractor={(item, index) => `group_${index}`}
        onEndReached={onLoadMore}
        onEndReachedThreshold={0.3}
        showsHorizontalScrollIndicator={false}
      />
    )
  }
  
  const styles = StyleSheet.create({
    groupContainer: {
      marginRight: 12,
      gap: 12
    },
    itemCard: {
      width: 150,
      height: 100,
      backgroundColor: '#f5f5f5',
      borderRadius: 8,
      padding: 10
    },
    itemPlaceholder: {
      width: 150,
      height: 100,
      opacity: 0
    }
  })
  
  export default TwoRowHorizontalList
  

备选组件方案 #

如果不想自行处理数据源，也可以选择以下成熟的社区组件：

• @shopify/flash-list：Shopify开源的高性能列表组件，API和FlatList完全兼容，渲染性能比原生FlatList高3-5倍，支持同样的横向双行布局实现，适合长列表场景
• react-native-super-grid：专门为多行列网格布局封装的列表组件，支持直接配置itemDimension、fixed等属性快速实现横向双行布局，不需要自行处理数据源分组

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