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 (
<View style={styles.container}>
<RefreshListView
style={styles.welcome}
data={this.state.dataValue}
keyExtractor={(item, index) => index}
renderItem={({ item }) => (
<View style={{ flexDirection: "row" }}>
<Image
source={{ uri: item.author.avatar_url }}
style={{
width: 50,
height: 50,
borderRadius: 25,
marginRight: 10
}}
/>
<Text
style={{ height: 80 }}
onPress={() => {
this.props.navigation.navigate("Details", {
abc: item.content
});
}}
>
{item.title}
</Text>
</View>
)}
refreshState={this.state.refreshState}
onHeaderRefresh={this.onHeaderRefresh}
onFooterRefresh={this.onFooterRefresh}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10,
flexDirection: "row"
}
});
