FlatList Load More 内容未占满屏幕时卡加载的解决方案

FlatList的onEndReached触发依赖列表的可滚动偏移量：当当前渲染的列表内容总高度小于FlatList自身容器高度时，列表不存在可滚动区域，无论onEndReachedThreshold设置为多少，都不会自动触发滚动到底部的回调，最终卡在加载中状态。

核心逻辑是在列表渲染完成后主动校验内容高度与容器高度的关系，内容未撑满屏幕且存在剩余数据时自动触发加载，直到内容撑满屏幕或所有数据加载完成，具体实现步骤如下：

• 先维护3个核心状态/引用，做加载防重与高度记录

import { useState, useRef } from 'react'
import { FlatList } from 'react-native'

// 每次加载的数据条数，和接口分页参数对齐即可
const PAGE_SIZE = 10
const [dataList, setDataList] = useState([])
const [isLoadingMore, setIsLoadingMore] = useState(false)
const [hasMoreData, setHasMoreData] = useState(true)
// 用ref存高度，避免触发不必要的重渲染
const listContainerHeight = useRef(0)
const contentHeight = useRef(0)

• 编写带防重逻辑的加载更多方法

const fetchMoreData = async () => {
  // 正在加载或没有更多数据时直接返回，避免重复请求
  if (isLoadingMore || !hasMoreData) return
  setIsLoadingMore(true)
  try {
    // 替换为实际接口请求逻辑，传对应分页参数
    const res = await fetchYourPageApi({
      page: Math.ceil(dataList.length / PAGE_SIZE) + 1,
      pageSize: PAGE_SIZE
    })
    const newData = res.data || []
    setDataList(prev => [...prev, ...newData])
    // 返回数据条数小于单页条数，说明已经没有更多数据
    setHasMoreData(newData.length >= PAGE_SIZE)
  } catch (err) {
    console.log('加载失败', err)
  } finally {
    setIsLoadingMore(false)
  }
}

• 给FlatList绑定高度检测与滚动回调，实现不满屏自动加载

<FlatList
  data={dataList}
  // 原有配置比如renderItem、keyExtractor保持不变即可
  onEndReachedThreshold={0.5}
  // 记录列表容器本身的高度
  onLayout={(e) => {
    listContainerHeight.current = e.nativeEvent.layout.height
  }}
  // 内容渲染完成后触发高度校验
  onContentSizeChange={(contentWidth, h) => {
    contentHeight.current = h
    // 内容高度小于容器高度时，自动触发加载
    if (h < listContainerHeight.current) {
      fetchMoreData()
    }
  }}
  // 滚动触底时的加载逻辑，自带防重判断
  onEndReached={() => {
    fetchMoreData()
  }}
  // 底部加载状态提示，可根据自身UI需求自定义
  ListFooterComponent={() => {
    return isLoadingMore ? <YourLoadingComponent /> : !hasMoreData ? <YourNoMoreTip /> : null
  }}
/>

• 如果列表项包含异步加载的内容（比如远程图片、动态高度的富文本），需要在对应内容加载完成后手动触发一次高度校验，避免初始计算的内容高度小于实际高度导致重复加载
• 安卓端部分低版本React Native存在高度计算偏差问题，可尝试加removeClippedSubviews={false}做兼容
• 不要给FlatList设置固定硬编码高度，保持flex:1的布局约束，避免容器高度读取错误

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