React-native ScrollView 上拉加载和下拉

我们日常开发的时候，经常会遇到上拉加载更多的需求，原因很简单，数据量大的时候分批次加载可提高加载效率，为用户省点流量和时间。
这次我就给大家分享一下我写得 ScrollView （大佬勿喷），本人是在前端道路上越走越远得小菜鸡
言归正传

首先第一步，引入我们得ScrollView

  import {ScrollView} from 'react-native';

引入完之后我们开始下面得操作

<ScrollView
      style={{flex:1,backgroundColor:'#fff'}}
      //触底事件 这个很重要
      onMomentumScrollEnd = {this._contentViewScroll}         
      automaticallyAdjustContentInsets={false}
      //是否新显示滚动条
      showsVerticalScrollIndicator={false}                     
      scrollsToTop={true}
    >

</ScrollView>

下面我们讲一下触底事件得方法

 /**
 * 上拉触底
 */
_contentViewScroll=(e)=>{

  var offsetY = e.nativeEvent.contentOffset.y; //滑动距离
  var contentSizeHeight = e.nativeEvent.contentSize.height; //scrollView contentSize高度
  var oriageScrollHeight = e.nativeEvent.layoutMeasurement.height; //scrollView高度


  if (offsetY + oriageScrollHeight >= contentSizeHeight){
    在这里面加入你需要指行得方法和加载数据
  }else if(offsetY + oriageScrollHeight <= 1){
    //这个是没有数据了然后给了false  得时候还在往上拉
  }else if(offsetY == 0){
   //这个地方是下拉刷新，意思是到顶了还在指行，可以在这个地方进行处理需要刷新得数据
  }
}

关于 FlatList 上拉刷新和下拉加载详解地址
https://www.jianshu.com/p/fb3bd2bf898c