2018-11-14 上拉加载 下拉翻页加载
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";
export default class App1 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 (
<View style={styles.container}>
<RefreshListView
style={styles.welcome}
data={this.state.dataValue}
keyExtractor={(item, index) => index}
renderItem={({ item }) => (
<Text
style={{ width: "100%", height: 80 }}
onPress={() => {
this.props.navigation.navigate("B", {
abc: item.content
});
}}
>
{item.title}
</Text>
)}
refreshState={this.state.refreshState}
onHeaderRefresh={this.onHeaderRefresh}
onFooterRefresh={this.onFooterRefresh}
/>
</View>
);
}
}
/**
* 样式表
*/
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5FCFF"
},
welcome: {
flex: 1
}
});
