import React, { Component } from “react”; import { withNavigation } from “react-navigation”; import { TouchableOpacity } from “react-native”; import RefreshListView, { RefreshState } from “react-native-refresh-list-view”; import { getData } from “./fetch”; import Item from “./Item”; 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); return data.data; }; requestFirstData = () => { try { this.setState( { refreshState: RefreshState.HeaderRefresh, page: 1 }, async () => { let data = await this.requestData(); this.setState({ data: data, refreshState: RefreshState.Idle }); } ); } catch (error) { 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 (error) { this.setState({ refreshState: RefreshState.Failure }); } };

componentDidMount() { this.requestFirstData(); }

headerRefresh = () => { this.requestFirstData(); }; footRefresh = () => { this.requestNextData(); }; renderItem = rowData => { return ( <TouchableOpacity onPress={() => this.props.navigation.navigate(“Detail”, { //跳转到详情，传递id和标题过去 id: rowData.item.id, title: rowData.item.title }) } > <Item item={rowData.item} /> </TouchableOpacity> ); }; render() { return ( <RefreshListView data={this.state.data} keyExtractor={item => item.id} renderItem={this.renderItem} refreshState={this.state.refreshState} onHeaderRefresh={this.headerRefresh} onFooterRefresh={this.footRefresh} /> ); } }

export default withNavigation(List);