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);//可跳转
下拉刷新上拉加载
最新推荐文章于 2023-09-15 12:00:02 发布