好用的ReactNative下拉刷新上拉加载的组件，支持iOS和Android

之前写iOS时，有这非常好用的下拉刷新和上拉加载的组件如MJReferesh这样优秀的组件，但是最近写ReactNative时，一直没发现非常如意的第三方下拉刷新的组件，所以便自己写了一个简单好用的刷新组件react-native-swRefresh，支持scrollView,ListView,支持自定义。支持iOS和Android

更新Android支持实现方式不一样所以Android体验可能稍微有点不同

新增beginRefresh()和endRefresh()方法来手动调用下拉刷新和结束下拉刷新类iOS中的MJRefrsh

新增endLoadMore() 结束上拉加载代替end()回调同样可以传入bool参数代表这次结束是否进入已无更多状态。

点我去Github

因为刚接触，所以也写不出非常优美的代码,改着改着就有点冗余了，有空就优化下，但是个人觉的应该是很好用的组件，这篇文章主要是介绍其如何使用：

安装:
```
  npm install react-native-swRefresh
```
使用:
- 引入

//根据需要引入import {  SwRefreshScrollView, //支持下拉刷新的ScrollView  SwRefreshListView, //支持下拉刷新和上拉加载的ListView  RefreshStatus, //刷新状态 用于自定义下拉刷新视图时使用  LoadMoreStatus //上拉加载状态 用于自定义上拉加载视图时使用} from 'react-native-swRefresh'

具体属性和方法 github上有介绍

简单使用(两个组件下拉刷新的使用方法是一样的，本文以SwRefreshListView为例)

_page = 0_dataSource = new ListView.DataSource({rowHasChanged:(row1,row2)=>row1 !== row2})// 构造constructor(props) {  super(props);  // 初始状态  this.state = {    dataSource:this._dataSource.cloneWithRows([0,1,2,3,4,5,6,7,8,9,0])  };}render(){  return this._renderListView() // ListView Demo}_renderListView(){return(  {        return ({'状态:'+refresStatus+','+offsetY})    }} //自定义下拉刷新视图参数，refresStatus是上面引入的RefreshStatus类型，对应刷新状态各个状态。offsetY对应下拉的偏移量,可用于定制动画。自定义视图必须通过customRefreshViewHeight指定高度        customRefreshViewHeight={100} //自定义刷新视图时必须指定高度      />)}  /** * 模拟刷新 * @param end * @private */_onListRefersh(end){  let timer =  setTimeout(()=>{    console.log('刷新成功')    clearTimeout(timer)    this._page=0    let data = []    for (let i = 0;i<10;i++){      data.push(i)    }    this.setState({      dataSource:this._dataSource.cloneWithRows(data)    })      //推荐以下写法 用户体验更好     if(已加载全部数据){             //如果此时刷新的数据就已经是全部数据了，不管怎样都应该将上拉加载组件设置为没有更多数据了的状态 或者通过isShowLoadMore控制其隐藏        this.refs.listView.setNoMoreData() //设置为没有更多数据了的状态            }else{            //这里调用resetStatus来重置上拉加载的状态 因为此前可上拉加载组件的状态可能已经是无更多数据了 所以进行状态重置 亦可以通     过state控制isShowLoadMore来控制显示上拉加载视图        this.refs.listView.resetStatus() //重置上拉加载的状态        }    //如果不这么写 上拉一次后 上拉组件也会获知正确的状态        end()//刷新成功后需要调用end结束刷新 不管成功或者失败都应该结束    / / this.refs.listView.endRefresh() //新增方法 结束刷新 建议使用end() 。当然这个可以在任何地方使用  },1500)}  /** * 模拟加载更多 * @param end * @private */_onLoadMore(end){  let timer =  setTimeout(()=>{    clearTimeout(timer)    this._page++    let data = []    for (let i = 0;i<(this._page+1)*10;i++){      data.push(i)    }    this.setState({      dataSource:this._dataSource.cloneWithRows(data)    })      let isNoMore = this._page > 2 //是否已无更多数据    //结束     end(isNoMore)// 假设加载4页后数据全部加载完毕 加载成功后需要调用end结束刷新     },2000)}componentDidMount() {   let timer = setTimeout(()=>{     clearTimeout(timer)      this.refs.listView.beginRefresh()    },500) //自动调用开始刷新 新增方法 }/*--tip--:如果刷新和加载在同一个方法里，对于传递的参数end()函数无需区分。onRefresh中的end()函数 中接受参数没有任何关系 只要调用end()函数就会结束刷新或加载*/

演示：

image

更新Android支持实现方式不一样所以Android体验可能稍微有点不同

新增beginRefresh()和endRefresh()方法来手动调用下拉刷新和结束下拉刷新类iOS中的MJRefrsh

新增endLoadMore() 结束上拉加载代替end()回调同样可以传入bool参数代表这次结束是否进入已无更多状态。

因为刚接触，所以也写不出非常优美的代码,改着改着就有点冗余了，有空就优化下，但是个人觉的应该是很好用的组件，这篇文章主要是介绍其如何使用：

演示：

啰嗦了这么多，希望能给大家提供方便，如果觉得好用的话给个star,谢谢！

更多相关文章

随机推荐

好用的ReactNative下拉刷新上拉加载的组件，支持iOS和Android

更新Android支持 实现方式不一样 所以Android体验可能稍微有点不同

新增beginRefresh()和endRefresh()方法来手动调用下拉刷新和结束下拉刷新 类iOS中的MJRefrsh

新增endLoadMore() 结束上拉加载 代替end()回调 同样可以传入bool参数代表这次结束是否进入已无更多状态。

因为刚接触，所以也写不出非常优美的代码,改着改着就有点冗余了，有空就优化下，但是个人觉的应该是很好用的组件，这篇文章主要是介绍其如何使用：

演示：

啰嗦了这么多，希望能给大家提供方便，如果觉得好用的话给个star,谢谢！

更多相关文章

随机推荐

更新Android支持实现方式不一样所以Android体验可能稍微有点不同

新增beginRefresh()和endRefresh()方法来手动调用下拉刷新和结束下拉刷新类iOS中的MJRefrsh

新增endLoadMore() 结束上拉加载代替end()回调同样可以传入bool参数代表这次结束是否进入已无更多状态。