react-native ListView下拉刷新上拉加载实现

2017-08-02 14:12:30 朋也 react-native学习笔记 react-native ListView

---

• 下拉刷新
• 上拉加载
• 参考

先看效果图

下拉刷新

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=>加载更多...</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滑动结束的标志是以该值作为判断条件的

参考

• [How to implement pull up to load more in React Native using ListView for Android?](https://stackoverflow.com/questions/40087775/how-to-implement-pull-up-to-load-more-in-react-native-using-listview-for-android)
• React Native: Hướng dẫn tạo Load More trong ListView
• react-native试玩(8)-列表视图

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

原文链接: https://chenyongze.github.io/2017/08/02/react-native-listview-refresh-loadmore/

文章目录