React Native如何实现FlatList嵌套横向FlatList布局

代码核心错误点 #

• renderItem参数解构不符合FlatList API规则：FlatList的renderItem回调返回的对象中，当前遍历项的固定字段名为item，自定义的outterItem/InnerItem取值为undefined，是导致列表渲染失败的核心原因
• 未配置嵌套滚动相关属性，安卓端会出现横向滑动和外层纵向滑动手势冲突、滑动卡顿的问题
• 若内层项key仅使用自身id，可能出现跨行列key重复，触发React渲染警告甚至布局错乱

修正后可直接运行的代码 #

import { View, Text, FlatList, StyleSheet } from 'react-native';

// 二维数组数据源，注意每个内层元素必须配置全局唯一key
const DATA = [
  [
    { key: '1-1', content: '卡片1-1' },
    { key: '1-2', content: '卡片1-2' },
    { key: '1-3', content: '卡片1-3' },
    { key: '1-4', content: '卡片1-4' },
  ],
  [
    { key: '2-1', content: '卡片2-1' },
    { key: '2-2', content: '卡片2-2' },
    { key: '2-3', content: '卡片2-3' },
    { key: '2-4', content: '卡片2-4' },
  ],
  [
    { key: '3-1', content: '卡片3-1' },
    { key: '3-2', content: '卡片3-2' },
    { key: '3-3', content: '卡片3-3' },
    { key: '3-4', content: '卡片3-4' },
  ]
];

export default function NestedScrollList() {
  return (
    <FlatList
      data={DATA}
      // 外层行key用行索引拼接前缀，保证唯一
      keyExtractor={(_, index) => `outer-row-${index}`}
      renderItem={({ item: rowData }) => (
        <View style={styles.rowContainer}>
          <FlatList
            horizontal={true}
            data={rowData}
            // 开启嵌套滚动支持，解决手势冲突
            nestedScrollEnabled={true}
            // 隐藏横向滚动条
            showsHorizontalScrollIndicator={false}
            // 横向列表内边距、卡片间距配置
            contentContainerStyle={styles.horizontalContent}
            keyExtractor={(innerItem) => innerItem.key}
            renderItem={({ item: cardData }) => (
              <View style={styles.cardBox}>
                <Text style={styles.cardText}>{cardData.content}</Text>
              </View>
            )}
          />
        </View>
      )}
    />
  )
}

const styles = StyleSheet.create({
  rowContainer: {
    marginVertical: 10,
  },
  horizontalContent: {
    paddingHorizontal: 16,
    gap: 12,
  },
  cardBox: {
    width: 120,
    height: 90,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cardText: {
    fontSize: 14,
    color: '#333'
  }
})

性能优化建议 #

• 列表数据量大时，给内外层FlatList都加上removeClippedSubviews={true}，自动释放屏幕外的组件内存，减少卡顿
• 安卓端可给内层横向FlatList添加renderToHardwareTextureAndroid={true}，利用GPU加速渲染横向滑动过程
• 若不需要列表翻页时保留滚动位置，可给内层FlatList设置scrollsToTop={false}，避免点击状态栏时所有横向列表同时回到起点
• 不要在内层FlatList外层套多余的可滚动组件，避免手势响应链冲突

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