ReactNative ListView + 上拉加载更多 + 下拉刷新

ListView + 上拉加载更多 + 下拉刷新

一、内容简介

ListView列表在添加了上拉加载更多功能之后再添加下拉刷新

二、代码实现

1、引入原生组件 RefreshControl

import { ListView, View, Text, ActivityIndicator, RefreshControl } from 'react-native';
注：RefreshControl 组件是RN原生的下拉刷新组件，可应用与ListView和ScrollView

2、修改构造方法

增加状态机：
isRefreshing：用来控制下拉刷新

this.state = {      demoList:  ds.cloneWithRows([]),      isLoadingTail: false,      isRefreshing: false,      isNoMoreData: false    };

3、修改render方法

增加下拉刷新组件

render() {    return (      <ListView        enableEmptySections={true}        dataSource={this.state.demoList}        renderRow={(rowData) => this._renderRow(rowData)}        renderFooter={() => this._renderFooter()}        onEndReached={() => this._endReached()}        onEndReachedThreshold={20}        refreshControl={          <RefreshControl            refreshing={this.state.isRefreshing}            onRefresh={() => this._onRefresh()}/>        }      />    );  }

4、修改fetchData方法

重点：添加isLoadMore、isFirst标记

isFirst：标记是否是第一次进入该页面，即初始化加载
isLoadMore：标记区分下拉刷新和下拉加载更多

fetchData(isFirst, isLoadMore) {    let page;    if(isLoadMore) { // 上拉加载更多      // 取出页码      page = this.demoListPageInde[0];      // 修改加载状态      this.setState({ isLoadingTail: true });    } else { // 下拉刷新      // 刷新时页码始终是1      page = 1;      // 第一次加载数据时不打开刷新机制      if(!isFirst) {        this.setState({          isRefreshing: true        });      }    }    let url = 'http://travel.9797168.com/user/tips/getDynamicTips?type=45&p=' + page + '&num=10';    fetch(url, {      method: 'GET',      headers: {},    })    .then((response)=>{      if(response.ok){        return response.json();      }    })    .then((responseJson)=>{      if(responseJson.status == 1) {        let responseData = responseJson.data;        if(responseData.length != 0) {          if(isLoadMore) { // 上拉加载更多            // 清空增量数据缓存数组            this.cachedDemoList = [];            // 存储新的增量数据            this.cachedDemoList = this.cachedDemoList.concat(responseData);            // 将新数据追加到旧数据中            this.demoList = this.demoList.concat(responseData);            // 页数+1            this.demoListPageInde[0] += 1;            // 默认每十条为一页，不足十条，则说明没有更多数据            if(responseData.length < 10) {              this.setState({                isNoMoreData: true              });            }          } else { // 下拉刷新            if(!isFirst) {              // 清空数据内存存储数组              this.demoList = [];              // 重置页数存储数组              this.demoListPageInde[0] = 1;            }            // 存储数据            this.demoList = this.demoList.concat(responseData)            // 自增            this.demoListPageInde[0] += 1;          }          // 利用 immutability-helper 更新状态机          this.setState((previousState) => {            var newState = update(previousState, {demoList:{              $set: ds.cloneWithRows(this.demoList)            }});            return newState;          });        } else {          if(isLoadMore) {            // 清空增量数据缓存数组            this.cachedDemoList = [];            // TODO 提示没有更多数据          } else {            // TODO 第一次加载或者下拉刷新          }        }        // 修改加载状态        if(isLoadMore) {          // 关闭加载状态          this.setState({            isLoadingTail: false          });        } else {          // TODO 可区分是否是第一次加载          this.setState({            isRefreshing: false          });        }      }    })    .catch((error)=>{      // 修改加载状态      if(isLoadMore) {        // 关闭加载状态        this.setState({          isLoadingTail: false        });      } else {        // TODO 可区分是否是第一次加载        this.setState({          isRefreshing: false        });      }    });  }

5、修改_endReached方法

_endReached = () => {    // 防止重复申请    if(this.state.isLoadingTail) {      return    }    // 获取数据    this.fetchData(false, true);  }

6、创建_onRefresh方法

_onRefresh = () => {    // 当加载到最后一页数据，再次下拉刷新时，需关闭isNoMoreData状态机    this.setState({      isNoMoreData: false    });    this.fetchData(false, false);  }

7、修改componentDidMount生命周期中的方法

this.fetchData(true, false);