React-Native 分页模板

import React, { Component } from 'react';
import { View } from 'react-native';
import RankCard from '../../components/bussiness/rankCard/rankCard';
import { flexColumnSpb } from '../../utils/StyleUtils';
import RefreshListView, {
  RefreshState,
} from '../../components/common/RefreshListView';


export class index extends Component {
  state = {
    dataList: [], // 数据
    refreshState: RefreshState.Idle,
    totalPage: 0, // 总个数
    currentPage: 1, // 当前页数
  };

  async componentDidMount() {
    await this.onHeaderRefresh();
  }

  async getTestList(isReload: boolean, currentPage = 1): Array<Object> {
    // correct
    const message = await Http.getRankList({
      page: currentPage,
      size: 10,
    });
    // correct
    const ans = message.data.data.dataList;
    
    this.setState({
      currentPage: currentPage,
      // correct
      totalPage: message.data.data.totalRecords / 10,
    });
    return isReload ? ans : [...this.state.dataList, ...ans];
  }

  onHeaderRefresh = async () => {
    this.setState({ refreshState: RefreshState.HeaderRefreshing });
    let dataList = await this.getTestList(true);
    this.setState({
      dataList: dataList,
      refreshState:
        dataList.length < 1 ? RefreshState.EmptyData : RefreshState.Idle,
    });
  };

  onFooterRefresh = async () => {
    this.setState({ refreshState: RefreshState.FooterRefreshing });
    let dataList = await this.getTestList(false, this.state.currentPage + 1);
    this.setState({
      dataList: dataList,
      refreshState:
        this.state.currentPage === this.state.totalPage
          ? RefreshState.NoMoreData
          : RefreshState.Idle,
    });
  };

  keyExtractor = (item: any, index: number) => {
    return index.toString();
  };

  render() {
    const { dataList } = this.state;
    return (
      <View style={{ flex: 1 }}>
          <RefreshListView
            data={dataList}
            // correct
            numColumns={1}
            contentContainerStyle={{ ...flexColumnSpb, backgroundColor: '' }}
            keyExtractor={this.keyExtractor}
            // correct
            renderItem={({ item, index }) => (
              <RankCard
                key={index}
                userId={item.userId}
                rankNumber={index + 4 < 10 ? '0' + (index + 4) : index + 4 + ''}
                userPhoto={item.avatar}
                userName={item.userNick}
                hot={item.hot}
              />
            )}
            refreshState={this.state.refreshState}
            onHeaderRefresh={this.onHeaderRefresh}
            onFooterRefresh={this.onFooterRefresh}
            // 可选
            footerRefreshingText="玩命加载中 >.<"
            footerFailureText="我擦嘞，居然失败了 =.=!"
            footerNoMoreDataText="-我是有底线的-"
            footerEmptyDataText="-好像什么东西都没有-"
          />
      </View>
    );
  }
}

export default index;