ScrollView组件添加上拉,下拉刷新

先看效果:

ScrollView上下刷新.gif

假设数据源: dataSource
container , scrollViewStyle, item的创建和style, 等就不写出来了。
主要看 onRefresh，onMomentumScrollEnd={this.onMomentumScrollEnd} 

render() {
    return(
        <View style={styles.container}>
            <ScrollView
               style={styles.scrollViewStyle}
               contentContainerStyle={{paddingTop: 10}}
               removeClippedSubviews
               scrollEventThrottle={16}
               // 滚动动画结束时调用此函数， 会比较频繁
               onMomentumScrollEnd={this.onMomentumScrollEnd}
               // 指定RefreshControl组件, 用于为ScrollView提供下拉刷新功能
               refreshControl={
                  <RefreshControl
                      refreshing={isFetching}
                      onRefresh={this.onRefresh}
                      colors={['rgb(217, 51, 58)']}
                  />
               }
           >
            // 遍历数据源, 并创建item. 
           {dataSource.map(this.renderItem)}
            
            // isNoMore：是否还有数据（看个人情况判断，有可能室比较当前page与totalPage比较，有可能是根据请求后数据量与给定的数据量比较。。。等等）
           {<View style={styles.loadingContainer}>
               {!isNoMore && <ActivityIndicator/>}
               <Text style={{marginLeft: 8}}>{isNoMore? '- 没有更多的数据了 -' : '正在加载更多的数据...'}</Text>
            </View>}
         </ScrollView>
      </View>
    );
}


// 头部刷新
onRefresh = () => {
   // 这里可以做下拉请求

   canLoadMore = false;
};

// 滚动动画结束时调用此函数，利用此函数进行上拉操作. 调用的比较频繁, 因此这里定义 canLoadMore属性进行判断
onMomentumScrollEnd = (event) => {
    // 滚动结束后, scrollView会返回个参数 event

   // 个人理解:  (offsetY+屏幕高度) - contentSize.height <=40(底部加载组件的高度)。
   // 属性：layoutMeasurement: 屏幕的尺寸

   const {contentOffset, contentSize, layoutMeasurement} = event.nativeEvent;

   // 1.获取offsetY, 屏幕高度
  const offsetY = contentOffset.y;
  const screenH = layoutMeasurement.height;
  const bottomY = offsetY + screenH;
    
  // 2.获取scroll的contentHeight
  const contentSizeHeight = contentSize.height;

  // 3.需要定义一个属性进行是否加载更多, 因为这个方法是只要滚动停止就会执行(向上拖拽, 向下拖拽都会执行, 这里只做加载更多)
  canLoadMore = bottomY >= contentSizeHeight;

  // 4.绝对值 判断
  if (Math.abs(bottomY - contentHeight) <= 40 && canLoadMore) {
    canLoadMore = false;
    // 做请求
  }
}

image.png