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);