react-native SectionList FlatList上拉分页加载

SectionList、FlatList提供了以下两个接口可供处理分页加载需求：

 

 

 

 

 

 

但是onEndReached有以下bug：

1.第一次渲染时有不必要的调用 ：onEndReached在初始渲染后会被调用一次或多次。

2.在当前数据无法铺满一页的情况下，onEndReached会被持续调用，直到满足onEndReachedThreshold条件为止。

 

切换思路解决上拉分页加载需求：

思路：

onScroll的回调对象event.nativeEvent中：

• contentSize表示整个ScrollView的高度height、宽度width
• contentOffset表示ScrollView在x/y轴上的位移值
• layoutMeasurement表示当前ScrollView容器的高度height、宽度width

如果列表触底，则有：

contentOffset.y + layoutMeasurement.height = contentSize.height

 

解决：

onScroll(event) {
  let y = event.nativeEvent.contentOffset.y
  let height = event.nativeEvent.layoutMeasurement.height
  let contentHeight = event.nativeEvent.contentSize.height
  if (Math.abs(y + height - contentHeight) < 1) {
    //Load More
  }
}