先看效果图

下拉刷新

React Native提供了一个组件可以实现下拉刷新方法RefreshControl

使用方法

<ListView
  refreshControl={
    <RefreshControl
      refreshing={this.state.refreshing}
      onRefresh={this._onRefresh.bind(this)}
    />
  }
  //...
</ListView>

在视图加载的时候的时候，将refreshing设置为true，数据加载完成设置为false即可

上拉加载

利用ListView里的onEndReached方法实现，ListView在滚动到最后一个Cell的时候,会触发onEndReached方法

先在ListView里添加一个Footer

render() {
    const FooterView = this.state.loadMore ?
      <View style={styles.footer}>
        <Text style={{fontSize: 16, color: '#777'}}>加载更多...</Text>
      </View> : null;
    return <ListView
      refreshControl={
        <RefreshControl
          refreshing={this.state.refreshing}
          onRefresh={this._onRefresh.bind(this)}
        />
      }
      style={[styles.listView]}
      dataSource={ds.cloneWithRows(this.state.dataSource)}
      enableEmptySections={true}
      renderRow={this._renderRow.bind(this)}
      onEndReachedThreshold={5}
      onEndReached={this._onEndReached.bind(this)}
      renderFooter={() => FooterView}
    />
  }

在方法_onEndReached里将Footer显示出来，在数据加载完成之后，再隐藏掉Footer

_onEndReached() {
    this.setState({
      loadMore: true,
      pageNo: this.state.pageNo + 1
    });
    this._fetchData();
  }

说明

  • ListView里还设置了一个参数onEndReachedThreshold这个参数与onEndReached配合使用，它的意思是：像素的临界值，该属性和onEndReached配合使用，因为onEndReached滑动结束的标志是以该值作为判断条件的

参考

源码：https://github.com/atjiu/ITNews-React-Native