react native Flatlist 多次错误触发onendReached

使用flatList做列表页上拉加载等多功能，主要使用以下两个属性：

• onEndReached：当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。

• onEndReachedThreshold：决定当距离内容最底部还有多远时触发onEndReached回调。其值是表示百分比的数值。

使用过程中遇到以下两个问题：

问题一： flatList初始化数据时首次请求的数据较少，flatList高度较小，多次触发onEndReached问题，直到请求的数据满足onEndReachedThreshold的设置。

通过设置FlatList的配置无法解决此问题。

情况一： 多页数据，设置每页请求数据数量可以铺满整屏

情况二： 当只有一页且数量较少时，通过设置特殊字段，退出onEndTouch回调。如下代码所示：

_onEndReached = () => {
    const {isENd} = this.props //isEnd 表示当前是数据请求的最后一页
  if(isENd) return;
  ...
};

问题二： flatList上拉刷新触发onEndTouch问题

解决方案： onScrollEndDrag 和 onMomentumScrollEnd 将标志字段置为false，退出onEndTouch回调，仅允许onScrollBeginDrag 和 onMomentumScrollBegin 情况正常调用onEndTouch回调。如下代码所示：

 {
    console.log('onScrollBeginDrag');
    this.canAction = true;
  }}
  onScrollEndDrag={() => {
    console.log('onScrollEndDrag');
    this.canAction = false;
  }}
  onMomentumScrollBegin={() => {
    console.log('onMomentumScrollBegin');
    this.canAction = true;
  }}
  onMomentumScrollEnd={() => {
    console.log('onMomentumScrollEnd');
    this.canAction = false;
  }}
/>

_onEndReached = () => {
  console.log('_onEndReached');
  if(!this.canAction) return;
  ...
};