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);