分页类的简单封装如下:

import React,{Component} from 'react';
import {
  View,
  Text,
  ListView
} from 'react-native';

export default class Pager extends Component {

  items = []; //分页的数据
  page = 1; //当前页,从1开始
  callback = null; //数据加载后的回调
  rows = 10; //分页大小
  moreFlag = true; //是否有下一页

  state = {
    loading: true,
    dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
  }

  //加载数据
  loadMore(callback, resolve) {
    if (this.state.moreFlag === false) {
      toast('没有更多数据');
      return;
    }
    this.setState({
      loading: true
    });
    if (callback) {
      this.callback = callback;
    }
    this.callback().then(items=> {
        this.items = this.items.concat(items);
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(this.items),
          loading: false
        });
        if (items.length == this.rows) { //more
          this.page = this.page + 1;
          this.moreFlag = true
        } else {
          this.moreFlag = false;
        }
        resolve && resolve();
      })
      .catch(e=> {
        this.setState({
          loading: false
        });
      });
  }

  reload() { //刷新数据
    this.reset();
    this.loadMore(null, null);
  }

  onPullRelease(resolve) {
    this.reset();
    this.loadMore(null, resolve);
  }

  reset() { //重置
    this.page = 1;
    this.items = [];
    this.moreFlag = true;
  }

}


分页类的继承:

export default class MyList extends Pager {

  componentWillMount() {
    //调用父类加载数据方法,并将加载数据的方式作为参数传递给loadMore方法
    super.loadMore(()=> { 
      return Ajax.post('content.comments', {
        cid: this.props.data.id
      }, {rows: this.rows, page: this.page})
      .then(data=> {
        return data.comments
      })
    });
  }
}