如何在单个ScrollView中渲染两个垂直FlatList？解决滚动异常与警告

问题根源 #

React Native的FlatList基于VirtualizedList实现，核心靠虚拟化只渲染可见区域列表项来优化性能。但把它嵌套在普通ScrollView里时，会直接破坏这种虚拟化机制：两个滚动容器的事件会互相冲突，导致滚动卡顿，同时触发官方警告：VirtualizedLists should never be nested inside plain ScrollViews。

最优解决方案：用单个FlatList实现多分区布局 #

把两个独立列表合并成一个带分区的FlatList，既保留虚拟化性能优势，又能避免滚动冲突。

具体做法：

• 把transaction和charging session的数据整理成带分区的结构，每个分区包含标题和对应列表数据
• 利用FlatList的sections、renderSectionHeader、renderItem属性实现分区渲染

示例代码：

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

// 整理带分区的数据结构
const dataSections = [
  {
    title: 'Transactions',
    data: [/* 你的transaction数据数组 */]
  },
  {
    title: 'Charging Sessions',
    data: [/* 你的charging session数据数组 */]
  }
];

const CombinedList = () => {
  // 渲染分区标题
  const renderSectionHeader = ({ section }) => (
    <View style={styles.sectionHeader}>
      <Text style={styles.sectionTitle}>{section.title}</Text>
    </View>
  );

  // 渲染列表项（可根据数据类型区分渲染逻辑）
  const renderItem = ({ item }) => (
    <View style={styles.listItem}>
      <Text>{item.content}</Text>
    </View>
  );

  return (
    <FlatList
      sections={dataSections}
      renderSectionHeader={renderSectionHeader}
      renderItem={renderItem}
      keyExtractor={(item, index) => index.toString()}
    />
  );
};

const styles = StyleSheet.create({
  sectionHeader: {
    padding: 12,
    backgroundColor: '#f5f5f5',
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  listItem: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  }
});

export default CombinedList;

临时方案（仅适用于小数据量） #

如果暂时不想重构布局，可以禁用内部FlatList的滚动和虚拟化，让外层ScrollView统一处理滚动，但这种方式会丢失虚拟列表的性能优化，数据量大时会出现卡顿：

<ScrollView>
  {/* Transaction列表 */}
  <FlatList
    data={transactionData}
    renderItem={renderTransactionItem}
    scrollEnabled={false}
    removeClippedSubviews={false}
    keyExtractor={(item) => item.id}
  />
  {/* Charging Session列表 */}
  <FlatList
    data={chargingSessionData}
    renderItem={renderSessionItem}
    scrollEnabled={false}
    removeClippedSubviews={false}
    keyExtractor={(item) => item.id}
  />
</ScrollView>

注意事项 #

• 优先选择单个FlatList的分区方案，这是React Native官方推荐的做法，能同时保证性能和滚动体验
• 数据量较大时绝对不能用临时方案，会导致内存占用过高、滚动卡顿等问题

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