import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view"; // 上拉加载下拉刷新依赖
import { withNavigation } from "react-navigation";
import Item from "./Item";
class List extends Component {
constructor(props) {
super(props);
this.state = {
refreshState: RefreshState.Idle, // 默认刷新状态隐藏
tab: this.props.tab,
limit: 15, // 一次最多显示15个
page: 1, // 第一页
datas: [] // 数据源
};
}
requestData = async () => {
// 异步请求字符串
let response = await fetch(
"https://cnodejs.org/api/v1/topics?tab=" +
this.state.tab +
"&page=" +
this.state.page +
"&limit=" +
this.state.limit
);
// let url = "https://cnodejs.org/api/v1/topics";
// url =
// url +
// "?tab=" +
// this.state.tab +
// "&page=" +
// this.state.page +
// "&limit=" +
// this.state.limit;
// // console.error(url);
// let data = await fetch(url, { method: "GET" });
// let json = await data.json();
let responsejson = await response.json(); // 请求出来的结果
return responsejson.data;
};
requestfistData = () => {
try {
this.setState(
{
refreshState: RefreshState.HeaderRefreshing, // 刷新头部
page: 1 // 将页面设置成第一页
},
async () => {
let data = await this.requestData();
this.setState({
datas: data, // 请求数据
refreshState: RefreshState.Idle // 隐藏刷新
});
// console.error(JSON.stringify(data));
}
);
} catch (error) {
this.setState({
refreshState: RefreshState.Failure
});
}
};
requestNextData = () => {
try {
this.setState(
{
refreshState: RefreshState.FooterRefreshing, // 刷新底部
page: this.state.page + 1 // 刷新底部时,将页面设置成下一页
},
async () => {
let data = await this.requestData();
this.setState({
datas: [...this.state.datas, ...data], // 刷新过后,将下一页的数据和上面的数据进行合并
refreshState:
this.state.datas.length > 30
? RefreshState.NoMoreData
: RefreshState.Idle
});
}
);
} catch (error) {
this.setState({
refreshState: RefreshState.Failure
});
}
};
componentDidMount() {
this.requestfistData();
}
headerRefresh = () => {
this.requestfistData();
};
footerRefresh = () => {
this.requestNextData();
};
renderItem = rowData => {
return (
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("Detail", {
id: rowData.item.id,
title: rowData.item.title,
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.refreshState}
onHeaderRefresh={this.headerRefresh}
onFooterRefresh={this.footerRefresh}
/>
);
}
}
export default withNavigation(List);
每一个页面的List
最新推荐文章于 2022-04-05 22:31:03 发布