下拉刷新上拉加载

import React, { Component } from "react";

import { withNavigation } from "react-navigation";

import RefreshListView, { RefreshState } from "react-native-refresh-list-view";

import { TouchableOpacity } from "react-native";

import Item from "./Item";

import { getData } from "./fetch";

class List extends Component {

constructor(props) {

super(props);

this.state = {

datas: [],

refershState: RefreshState.Idle, //默认刷新状态隐藏

page: 1, //默认显示第一个页

tab: props.tab,

limit: 10 //当前页面线束10条数据

};

}

requestData = async () => {

let obj = {

page: this.state.page,

tab: this.state.tab,

limit: this.state.limit

}; //从状态里面取发送给后台的参数

let data = await getData("/topics", obj);

// console.error(data.data);

return data.data;

};

requestFirstData = () => {

try {

this.setState(

{

refershState: RefreshState.HeaderRefreshing,

page: 1

},

async () => {

let data = await this.requestData();//获取新数据

this.setState({

datas: data,//用新数据覆盖源数据

refershState: RefreshState.Idle

});

}

);

} catch (error) {

this.setState({

refershState: RefreshState.Failure

});

}

};

requestFootData = () => {

try {

this.setState(

{

refershState: RefreshState.FooterRefreshing,

page: this.state.page + 1//显示第二页

},

async () => {

let data = await this.requestData();

this.setState({

datas: [...this.state.datas, ...data],//增加数据

refershState:

this.state.datas.length > 30//判断长度

? RefreshState.NoMoreData

: RefreshState.Idle

});

}

);

} catch (error) {

this.setState({

refershState: RefreshState.Failure

});

// console.error(error);

}

};

componentDidMount() {

this.requestFirstData();

}//初始化数据

onHeader = () => {

this.requestFirstData();

};

onFooter = () => {

this.requestFootData();

};

renderItem = rowData => {

return (

<TouchableOpacity

onPress={() =>

this.props.navigation.navigate("Detil", {

content: rowData.item.content

})//点击跳转

}

>

<Item item={rowData.item} />

</TouchableOpacity>

);

};

render() {

return (

<RefreshListView//列表刷新

data={this.state.datas}

keyExtractor={item => item.id}

renderItem={this.renderItem}

refreshState={this.state.refershState}

onHeaderRefresh={this.onHeader}//下拉刷新

onFooterRefresh={this.onFooter}//上拉加载

/>

);

}

}

export default withNavigation(List);//可跳转