import React, { Component } from "react";
import { StyleSheet, Text, View, Image } 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 = () => {
this.setState({
refreshState: RefreshState.FooterRefreshing,
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 }) => ( source={{ uri: item.author.avatar_url }} style={{ width: 50, height: 50, borderRadius: 25, marginRight: 10 }} /> style={{ 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: { fontSize: 20, textAlign: "center", margin: 10, flexDirection: "row" } });