React Native中FlatList初始加载触发onEndReached，滚动到底部无响应

核心原因 #

FlatList嵌套在ScrollView中时，ScrollView会拦截所有滚动事件，导致FlatList无法正确计算自身的滚动位置和底部触发条件，进而出现初始加载触发onEndReached，但滚动到底部不触发的问题，nestedScrollEnabled通常无法彻底解决这种事件冲突。

解决方案 #

方案1：移除外层ScrollView（优先推荐）

FlatList本身具备滚动能力，如果页面布局允许，直接去掉外层ScrollView，给FlatList所在容器设置flex:1，确保FlatList能占满可用空间：

<View style={{ flex: 1 }}>
  <FlatList
    data={stationComments}
    keyExtractor={(_, index) => index.toString()}
    renderItem={({ item: comment }) =>
      <Review
        key={comment.commentId}
        comment={comment}
      />
    }
    onEndReached={() => nextPage()}
    onEndReachedThreshold={0.1} // 建议设为0.1，避免精度问题导致不触发
  />
</View>

方案2：将页面其他滚动内容转为FlatList的Header/Footer

如果页面必须保留其他滚动内容（比如顶部导航、筛选栏），可以把这些内容作为FlatList的ListHeaderComponent或ListFooterComponent，用单个FlatList替代ScrollView嵌套：

<FlatList
  data={stationComments}
  keyExtractor={(_, index) => index.toString()}
  ListHeaderComponent={() => (
    // 原ScrollView中的顶部内容，比如导航栏、筛选组件
    <View style={{ height: 100, backgroundColor: '#f5f5f5' }}>
      <Text>顶部筛选栏</Text>
    </View>
  )}
  renderItem={({ item: comment }) =>
    <Review
      key={comment.commentId}
      comment={comment}
    />
  }
  onEndReached={() => nextPage()}
  onEndReachedThreshold={0.1}
/>

方案3：给FlatList设置固定高度（迫不得已时使用）

如果必须保留ScrollView嵌套，给FlatList设置明确的固定高度，同时开启nestedScrollEnabled，确保FlatList能独立计算滚动区域：

<ScrollView style={{ flex: 1 }}>
  {/* 其他页面内容 */}
  <FlatList
    style={{ height: 400 }} // 设置固定高度
    nestedScrollEnabled={true}
    data={stationComments}
    keyExtractor={(_, index) => index.toString()}
    renderItem={({ item: comment }) =>
      <Review
        key={comment.commentId}
        comment={comment}
      />
    }
    onEndReached={() => nextPage()}
    onEndReachedThreshold={0.1}
  />
  {/* 其他页面内容 */}
</ScrollView>

额外注意点 #

• 避免将onEndReachedThreshold设为0，建议设为0.1~0.2，滚动位置计算存在精度误差，设为0可能导致无法触发。
• 确保nextPage函数中加入防抖逻辑，避免重复触发请求。

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