React Native中如何在全局ScrollView中嵌套多个FlatList？

在React Native中直接用ScrollView包裹FlatList会遇到滚动冲突和FlatList高度无法自适应的问题，以下是几种实用的解决方式：

1. 给FlatList设置固定高度（最简单直接） #

如果每个列表的高度可预估，直接给FlatList设置固定高度，同时开启嵌套滚动支持（Android需手动开启，iOS默认支持）：

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

const HomeScreen = () => {
  const data1 = ['条目1-1', '条目1-2', '条目1-3'];
  const data2 = ['条目2-1', '条目2-2'];
  const data3 = ['条目3-1', '条目3-2', '条目3-3', '条目3-4'];

  const renderItem = ({ item }) => (
    <View style={{ padding: 16, borderBottomWidth: 1, borderColor: '#eee' }}>
      <Text>{item}</Text>
    </View>
  );

  return (
    <ScrollView style={{ flex: 1 }}>
      {/* 第一个列表 */}
      <View style={{ marginVertical: 16 }}>
        <Text style={{ fontSize: 18, fontWeight: 'bold', paddingHorizontal: 16, marginBottom: 8 }}>列表1</Text>
        <FlatList
          data={data1}
          renderItem={renderItem}
          keyExtractor={(item) => item}
          style={{ height: 200 }}
          nestedScrollEnabled={true}
          showsVerticalScrollIndicator={false}
        />
      </View>

      {/* 第二个列表 */}
      <View style={{ marginVertical: 16 }}>
        <Text style={{ fontSize: 18, fontWeight: 'bold', paddingHorizontal: 16, marginBottom: 8 }}>列表2</Text>
        <FlatList
          data={data2}
          renderItem={renderItem}
          keyExtractor={(item) => item}
          style={{ height: 150 }}
          nestedScrollEnabled={true}
          showsVerticalScrollIndicator={false}
        />
      </View>

      {/* 第三个列表 */}
      <View style={{ marginVertical: 16 }}>
        <Text style={{ fontSize: 18, fontWeight: 'bold', paddingHorizontal: 16, marginBottom: 8 }}>列表3</Text>
        <FlatList
          data={data3}
          renderItem={renderItem}
          keyExtractor={(item) => item}
          style={{ height: 250 }}
          nestedScrollEnabled={true}
          showsVerticalScrollIndicator={false}
        />
      </View>
    </ScrollView>
  );
};

export default HomeScreen;

2. 动态计算FlatList高度（适合高度不固定的场景） #

如果列表高度无法预估，可根据数据源长度和单个item的固定高度计算总高度，还能设置最大高度避免列表过长：

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

const HomeScreen = () => {
  const ITEM_HEIGHT = 60; // 单个item固定高度
  const data1 = ['条目1-1', '条目1-2', '条目1-3', '条目1-4', '条目1-5'];
  const data2 = ['条目2-1'];
  
  // 计算列表高度，最多不超过300
  const list1Height = Math.min(data1.length * ITEM_HEIGHT, 300);
  const list2Height = data2.length * ITEM_HEIGHT;

  const renderItem = ({ item }) => (
    <View style={{ height: ITEM_HEIGHT, padding: 16, borderBottomWidth: 1, borderColor: '#eee', justifyContent: 'center' }}>
      <Text>{item}</Text>
    </View>
  );

  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={{ marginVertical: 16 }}>
        <Text style={{ fontSize: 18, fontWeight: 'bold', paddingHorizontal: 16, marginBottom: 8 }}>动态高度列表</Text>
        <FlatList
          data={data1}
          renderItem={renderItem}
          keyExtractor={(item) => item}
          style={{ height: list1Height }}
          nestedScrollEnabled={true}
          showsVerticalScrollIndicator={false}
        />
      </View>

      <View style={{ marginVertical: 16 }}>
        <Text style={{ fontSize: 18, fontWeight: 'bold', paddingHorizontal: 16, marginBottom: 8 }}>短列表</Text>
        <FlatList
          data={data2}
          renderItem={renderItem}
          keyExtractor={(item) => item}
          style={{ height: list2Height }}
          nestedScrollEnabled={true}
          showsVerticalScrollIndicator={false}
        />
      </View>
    </ScrollView>
  );
};

export default HomeScreen;

3. 替代方案：用SectionList整合多数据源 #

如果你的业务场景允许整合多组数据，用SectionList可以避免外层ScrollView，单个组件就能实现分组列表效果，代码更简洁：

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

const HomeScreen = () => {
  const sections = [
    { title: '列表1', data: ['条目1-1', '条目1-2', '条目1-3'] },
    { title: '列表2', data: ['条目2-1', '条目2-2'] },
    { title: '列表3', data: ['条目3-1', '条目3-2', '条目3-3'] },
  ];

  const renderItem = ({ item }) => (
    <View style={{ padding: 16, borderBottomWidth: 1, borderColor: '#eee' }}>
      <Text>{item}</Text>
    </View>
  );

  const renderSectionHeader = ({ section }) => (
    <Text style={{ fontSize: 18, fontWeight: 'bold', padding: 16, backgroundColor: '#f5f5f5' }}>
      {section.title}
    </Text>
  );

  return (
    <SectionList
      sections={sections}
      renderItem={renderItem}
      renderSectionHeader={renderSectionHeader}
      keyExtractor={(item) => item}
      style={{ flex: 1 }}
    />
  );
};

export default HomeScreen;

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