import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";
export default class App extends Component {
/**
* 初始化构造方法
*/
constructor(props) {
super(props);
this.state = {
dataValue: [], //数据源
refreshState: RefreshState.Idle, //静止状态
page: 1
};
}
/**
* 生命周期
*/
componentDidMount() {
this.onHeaderRefresh();
}
//下拉刷新
onHeaderRefresh = () => {
//1.更新状态，下拉状态
this.setState({
refreshState: RefreshState.HeaderRefreshing,
page: 1
});
//2.网络加载
fetch(
`https://cnodejs.org/api/v1/topics?page=${
this.state.page
}&tab=good&limit=10`
)
.then(response => response.json())
.then(responseJson => {
this.setState({
dataValue: responseJson.data,
refreshState: RefreshState.Idle,
page: this.state.page + 1
});
})
.catch(error => {
this.setState({
refreshState: RefreshState.Failure
});
console.warn(error);
});
};
//上拉加载更多
onFooterRefresh = () => {
this.setState({
refreshState: RefreshState.FooterRefreshing
});
//2.网络加载
fetch(
`https://cnodejs.org/api/v1/topics?page=${
this.state.page
}&tab=good&limit=10`
)
.then(response => response.json())
.then(responseJson => {
this.setState({
dataValue: [...this.state.dataValue, ...responseJson.data],
refreshState: RefreshState.Idle,
page: this.state.page + 1
});
})
.catch(error => {
this.setState({
refreshState: RefreshState.Failure
});
console.warn(error);
});
};
/**
* 元素渲染
*/
render() {
return (
style={styles.welcome} data={this.state.dataValue} keyExtractor={(item, index) => index} renderItem={({ item }) => ( style={{ width: "100%", height: 80 }} onPress={() => { this.props.navigation.navigate("Details", { abc: item.content }); }} > {item.title} )} refreshState={this.state.refreshState} onHeaderRefresh={this.onHeaderRefresh} onFooterRefresh={this.onFooterRefresh} /> ); } } /** * 样式表 */ const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#F5FCFF" }, welcome: { flex: 1 } });