如何让TikTok式视频播放器的FlatList在第9个视频触发onEndReached？

要让onEndReached在第9个视频显示时触发，核心是结合「每个视频项铺满全屏」的特性，调整onEndReachedThreshold的取值：

关键原理 #

FlatList的onEndReachedThreshold是相对于视口高度的比例值，表示当滚动到距离列表底部还有「阈值 × 视口高度」的位置时触发加载。由于你的每个视频项高度等于视口高度（viewAreaHeight），要在第9个视频（索引8）显示时触发，意味着此时距离列表底部还有1个视频的高度（即1倍视口高度），因此阈值应设为1。

修改代码 #

直接修改VIDEO_FEED_FLATLIST_OPTIONS中的onEndReachedThreshold：

const VIDEO_FEED_FLATLIST_OPTIONS = {
  removeClippedSubviews: true,
  windowSize: 3,
  initialNumToRender: VIDEO_FEED_ITEMS_TO_RENDER,
  maxToRenderPerBatch: VIDEO_FEED_ITEMS_TO_RENDER,
  updateCellsBatchingPeriod: 100,
  onEndReachedThreshold: 1 // 改为1，对应1倍视口高度的底部距离
}

额外验证点 #

确保你的getItemLayout函数配置正确，这是FlatList准确计算滚动位置的前提：

const getItemLayout = (data, index) => ({
  length: viewAreaHeight, // 每个项的高度等于视口高度
  offset: viewAreaHeight * index, // 每个项的偏移量是索引×视口高度
  index,
});

说明 #

• 当用户滚动到第9个视频时，视口底部距离列表底部恰好剩下1个视频的高度（1倍视口高度），此时触发onEndReached加载下一批视频。
• 该配置不受每次加载视频数量（10个）的影响，只要每个项高度等于视口高度，提前1个项触发的阈值始终为1。

内容的提问来源于stack exchange，提问作者Tom Söderlund