http://www.jianshu.com/p/cb029455f9cd

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

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

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

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

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

• 安装:

  npm install react-native-swRefresh

• 使用:

  • 引入

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

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

1. 简单使用(两个组件下拉刷新的使用方法是一样的，本文以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

image

image

image

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