如何让页面中普通View与FlatList同步滚动并保留onEndReached功能？

问题场景 #

需要实现一个页面：顶部是头部图片，下方是带分页功能的列表（用FlatList，依赖onEndReached触发加载下一页）。当前遇到的矛盾：

• 不把内容包裹在ScrollView里：头部固定不动，无法随列表滚动
• 用ScrollView包裹并设置FlatList的scrollEnabled={false}：头部和列表能同步滚动，但onEndReached回调失效，分页功能无法正常工作

解决方案 #

不要用外层ScrollView，直接利用FlatList自带的ListHeaderComponent属性，将头部图片作为列表的头部组件。这样既能让头部随列表一起滚动，又能保留FlatList自身的滚动和分页功能。

代码示例 #

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

const App = () => {
  const [data, setData] = useState(Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`));
  const [isLoading, setIsLoading] = useState(false);

  // 模拟加载下一页数据
  const loadMoreData = () => {
    if (isLoading) return;
    setIsLoading(true);
    setTimeout(() => {
      const newData = Array.from({ length: 10 }, (_, i) => `Item ${data.length + i + 1}`);
      setData(prev => [...prev, ...newData]);
      setIsLoading(false);
    }, 1000);
  };

  // 头部组件
  const HeaderComponent = () => (
    <Image
      source={{ uri: 'https://picsum.photos/800/200' }}
      style={styles.headerImage}
      resizeMode="cover"
    />
  );

  const renderItem = ({ item }) => (
    <View style={styles.itemContainer}>
      <Text style={styles.itemText}>{item}</Text>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item}
      ListHeaderComponent={HeaderComponent}
      onEndReached={loadMoreData}
      onEndReachedThreshold={0.1}
      ListFooterComponent={isLoading ? <Text style={styles.loadingText}>加载中...</Text> : null}
    />
  );
};

const styles = StyleSheet.create({
  headerImage: {
    width: '100%',
    height: 200,
  },
  itemContainer: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  itemText: {
    fontSize: 16,
  },
  loadingText: {
    textAlign: 'center',
    padding: 16,
    fontSize: 14,
    color: '#666',
  },
});

export default App;

方案说明 #

• ListHeaderComponent是FlatList的原生属性，专门用来添加列表头部，会自动跟随列表滚动，不需要额外的ScrollView嵌套
• FlatList保持默认的scrollEnabled={true}，因此onEndReached回调能正常触发，分页加载功能不受影响
• 这种方式既满足了头部与列表同步滚动的需求，又保留了FlatList的所有原生滚动和分页特性，是React Native中实现此类布局的标准方案

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