关于react-native中FlatList的 上拉加载更多，下拉刷新

前言：在react-native项目中，列表是非常常见的，并且react-native官方也有提供列表组件 FlatList；但是这个组件本身的上拉加载更多，下拉刷新属性是有一定问题的，需要我们字段去控制才能完美的实现。

代码实现： ==>> 主要是实现 上拉加载更多，下拉刷新 功能，可能存在一些其他的自定义组件没有引入

1. 首先，定义一个FlatList列表

<FlatList
     data={sourceData}
     keyExtractor = {(item, index) => index.toString()}       //不重复的key
     renderItem={this._renderItem}
     ListEmptyComponent={<EmptyView/>}
     onEndReachedThreshold={0.3}
     onEndReached={()=>this._onEndReached()}

     onRefresh={ () => {this._onRefresh() } }
     refreshing = {this.state.isRefreshing}
/>

2. 我们看一下需要定义的state

constructor(props) {
    super(props);
    this.state = {
          isRefreshing: false,            //控制下拉刷新
          isLoadMore: false,               //控制上拉加载

          currentPage: 1,             //当前请求的页数
          totalCount: 0,              //数据总条数
          sourceData: [],             //列表数据
    };
}

3. 请求数据

componentDidMount(){
     this.getDataList();
}
async getDataList(){
     const {dispatch, goBack, navigate, setParams, state: {params:{hfItem}}} = this.props.navigation;
     try{
         // 请求接口，参数不用管；这里只需要主要  currentPage 和 pageSize即可
         let data = await API.cgzs.relationList({
              deptId: hfItem.departmentId,
              currentPage: this.state.currentPage,
              pageSize: 10
         });

         if(this.state.currentPage == 1){
              this.setState({
                   sourceData: data.data.list,
                   totalCount: data.data.totalCount,
                   isRefreshing: false                 //有可能是下拉刷新
              })
         }else{
              this.setState({
                   sourceData: this.state.sourceData.concat(data.data.list),
                   isLoadMore: false               //关闭正在加载更多
              })
         }
        

      }catch (err) {
            showToast(err.message);
      }
}

4. 上拉加载更多

_onEndReached() {         //上拉加载更多
     const {currentPage, totalCount, sourceData, isLoadMore} = this.state;

     if(sourceData.length < totalCount && !isLoadMore){     //还有数据没有加载完，并且不是正在上拉加载更多
          this.setState({
              currentPage: currentPage+1,             //加载下一页
              isLoadMore: true                        //正在加载更多
          }, () => {
                this.getDataList();          //利用setState的第二个参数，以便获取最新的state
          })
     }
}

3. 下来刷新

_onRefresh(){             // 下拉刷新
    // 正在上拉刷新，请求第一页
    this.setState({ isRefreshing: true, currentPage: 1 }, () => {
         this.getDataList();        //利用setState的第二个参数，以便获取最新的state
    });
}

 

 

总结：要做到很好的控制 FlatList 的上拉加载更多，下拉刷新功能，需要额外（除去保存数据的页数，总条数和list）自己定义两个state；

isRefreshing: false,            //控制下拉刷新
isLoadMore: false,               //控制上拉加载

思路：

        开始 上拉加载更多，下拉刷新时将对于的state设置为true，数据请求结束以后又设为flase；

        上拉加载更多时，需要判断是否还有数据可以加载

        在请求数据后保存时，需要判断是否请求的是第一页，第一页只保存当前请求得到的数据，否则是累加（即concat）

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出