ReactNative ScrollView 实现上拉加载/下拉

本人仅在ios设备上测试代码，不确定android是否能使用

原理

ScrollView在拖拽滚动到时候，会触发onScroll事件，那么我们就监听这个事件，然后判断位置值，如距离头部、距离底部的距离，然后再进行对应操作。

基础代码

组件：

<ScrollView
  scrollEventThrottle={200}
  onScroll={this._onScroll.bind(this)}>
  <View />
</ScrollView >

这里的scrollEventThrottle是设置滚动的敏感值，越大拖拽越敏感（触发事件次数越多）

事件：

_onscroll(evt) {
  console.log('[EVT]', evt);
}

我们首先调试打印出事件对象（查看数值），然后再根据功能去进行判断

隐藏状态栏功能

假设，我们当前的ScrollView显示的是一篇文章，需要在上滑的时候隐藏状态栏（如果内容超出屏幕范围），下滑到头部的时候显示状态栏

const y = evt['nativeEvent']['contentOffset'].y;
// 如果y < 50，则显示状态栏，否则隐藏
StatusBar.setHidden(y > 50, true);

上拉加载

在查看调试数据evt.nativeEvent时，可以发现：

• contentSize数据值不变，代表此时整个ScrollView的高度height、宽度width
• contentOffset的y值变大（回弹的时候变会正常值），如果拉到底，则为一个稳定的值
• layoutMeasurement数据不变，代表的是当前屏幕的高度height、宽度width
• contentOffset.y + layoutMeasurement.height = contentSize.height

注意看最后一个发现，当滑动到底部的时候，contentOffset.y的值就是整个ScrollView的高度（contentSize.height）减去屏幕的高度layoutMeasurement.height。
也就是，我们通过判断contentOffset.y的值是否大于ScrollView的高度减去屏幕的高度，即可知道：是否已经下拉到底部后再继续拖拽

好了，原理已经解释得差不多了，那么我们来用代码实现：

_onScroll(evt) {
  const event = evt['nativeEvent'];
  // 如果y < 50，则显示状态栏，否则隐藏
  StatusBar.setHidden(event['contentOffset']['y'] > 50, true);
  
  // 如果拖拽值超过底部50，且当前的scrollview高度大于屏幕高度，则加载更多
  const _num = event['contentSize']['height'] - event['layoutMeasurement']['height'] - event['contentOffset']['y'];
  
  if (event['contentSize']['height'] > event['layoutMeasurement']['height'] && _num < -50) {
    console.log('上拉，加载更多评论');
  }
}