RN 上拉刷新下拉加载

import React, { Component } from “react”;
import { TouchableOpacity } from “react-native”;
import { getData } from “…/comm/Fetch”;
import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;
import Item from “./Item”;
import withNavigation from “react-navigation/src/views/withNavigation”;

class List extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
refreshState: RefreshState.Idle,
page: 1,
tab: props.tab,
limit: 10
};
}
requestData = async () => {
let obj = {
page: this.state.page,
tab: this.state.tab,
limit: this.state.limit
};
let data = await getData("/topics", obj);
// console.error(data);
return data.data;
};

requestFirstData = () => {
try {
this.setState(
{
refreshState: RefreshState.HeaderRefreshing,
page: 1
},
async () => {
let data = await this.requestData();
this.setState({
data: data,
refreshState: RefreshState.Idle
});
}
);
} catch (err) {
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({
data: […this.state.data, …data],
refreshState:
this.state.data.length > 30
? RefreshState.NoMoreData
: RefreshState.Idle
});
}
);
} catch (err) {
this.setState({
refreshState: RefreshState.Failure
});
}
};

componentDidMount() {
this.requestFirstData();
}

headerRefresh = () => {
this.requestFirstData();
};

footerRefresh = () => {
this.requestNextData();
};

renderItem = rowData => {
return (
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate(“Xiangqing”, {
id: rowData.item.id,
title: rowData.item.title
})
}
>


);
};

render() {
return (
<RefreshListView
data={this.state.data}
keyExtractor={item => item.id}
renderItem={this.renderItem}
refreshState={this.state.refreshState}
onHeaderRefresh={this.headerRefresh}
onFooterRefresh={this.footerRefresh}
/>
);
}
}

export default withNavigation(List);