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
  }
}