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

本文介绍了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滑动结束的标志是以该值作为判断条件的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。