好用的ReactNative下拉刷新上拉加载的组件，支持iOS和
2016-10-20 本文已影响4001人
昵称你也抢我的
之前写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上有介绍
- 简单使用(两个组件下拉刷新的使用方法是一样的，本文以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(
<SwRefreshListView
dataSource={this.state.dataSource}
ref="listView"
renderRow={this._renderRow.bind(this)}
onRefresh={this._onListRefersh.bind(this)}//设置下拉刷新的方法 传递参数end函数 当刷新操作结束时
onLoadMore={this._onLoadMore.bind(this)} //设置上拉加载执行的方法 传递参数end函数 当刷新操作结束时 end函数可接受一个bool值参数表示刷新结束后是否已经无更多数据了。
//isShowLoadMore={false} //可以通过state控制是否显示上拉加载组件，可用于数据不足一屏或者要求数据全部加载完毕时不显示上拉加载控件
customRefreshView={(refresStatus,offsetY)=>{
return (<Text>{'状态:'+refresStatus+','+offsetY}</Text>)
}} //自定义下拉刷新视图参数，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
