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

先看个效果:

FlatList刷新.gif

假设数据源: dataSource; 主要看onRefresh, ListFooterComponent.
注: 头部刷新时, 需要更新 refreshing的状态(true/false)

render() {
    return (
        <View style={styles.container}>
           <FlatList
               data={dataSource}
               renderItem={({item})=>this.renderItem(item)}
               onRefresh={this.onRefresh}
               refreshing={isRefreshing}
               ListFooterComponent={this._renderFooter}
               onEndReached={this._onEndReached}
               // 注意此参数是一个比值而非像素单位。比如，0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发(0---1之间)
               onEndReachedThreshold={0.1}
               keyExtractor={(item, index)=>`${item.item_id}-${index}`}
           />
        </View>
    );
}

// 头部刷新
onRefresh = ()=>{
  isRefreshing = true;
  // 做请求
};

// 尾部加载更多
_renderFooter = ()=>{
  return(
      <FooterLoadMore
          // isNoMore: 是否还有数据可加载
          isNoMore={isNoMore}
      />
  );
};

FooterLoadMore自定义组件:

image.png