朋也的博客 » 首页 » 文章

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

作者：朋也
日期：2017-08-02
类别：react-native学习笔记 

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）

先看效果图

20170802142318

下拉刷新

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();
  }

说明

参考

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

相关文章