中文
English |react-native-pullRefreshScrollView
React Native Pull To Refresh Component for ios platform support ScrollView,ListView
Demo
ScrollView:
![](http://7jpp2v.com1.z0.glb.clouddn.com/ScrollView.gif)
ListView:
![](http://7jpp2v.com1.z0.glb.clouddn.com/ListView.gif)
How to use
Download from npm
npm install --save react-native-pullrefresh-scrollview
Use in Scrollview
; { return <PullRefreshScrollView ref="PullRefresh" onRefresh=this> <View><Text>Scroll1</Text></View> </PullRefreshScrollView> ; }
Use in Listview
; { return <ListView renderScrollComponent= <PullRefreshScrollView onRefresh=this ...props /> dataSource=thisstatedataSource renderRow= <Text>rowData</Text> /> ;}
image
![](http://7jpp2v.com1.z0.glb.clouddn.com/ListViewImage.gif)
Only text
![](http://7jpp2v.com1.z0.glb.clouddn.com/ListViewText.gif)
Only image
![](http://7jpp2v.com1.z0.glb.clouddn.com/ListViewImage2.gif)
LoadMore
![](https://oc5n93kni.qnssl.com/Simulator%20Screen%20Shot%202016%E5%B9%B412%E6%9C%8825%E6%97%A5%2019.49.44.png?imageView2/2/w/318)
End LoadMore
![](https://oc5n93kni.qnssl.com/Simulator%20Screen%20Shot%202016%E5%B9%B412%E6%9C%8825%E6%97%A5%2019.49.46.png?imageView2/2/w/318)
props
onRefresh: refreshedText: '' refreshingText: '' refreshText:'' useLoadMore:false endText:'' endingText:'' indicatorArrowImg: { // default arrow.png style:{}, url:'' } indicatorImg: { // default style:{}, url:'' } refreshType:'normal' // normal image text
Regain the PullRefresh
{ PullRefresh;}
End the LoadMore
{ PullRefresh;}
Advice
English
中文 |react-native-pullRefreshScrollView
React Native下拉刷新组件 ios 平台 支持ScrollView,ListView
效果展示
ScrollView:
![](http://7jpp2v.com1.z0.glb.clouddn.com/ScrollView.gif)
ListView:
![](http://7jpp2v.com1.z0.glb.clouddn.com/ListView.gif)
如何引入
从npm上下载组件
npm install --save react-native-pullrefresh-scrollview
在ScrollView中使用
; { return <PullRefreshScrollView ref="PullRefresh" onRefresh=this> <View><Text>Scroll1</Text></View> </PullRefreshScrollView> ; }
在ListView中使用
; { return <ListView renderScrollComponent= <PullRefreshScrollView onRefresh=this ...props /> dataSource=thisstatedataSource renderRow= <Text>rowData</Text> /> ;}
定制图片
![](http://7jpp2v.com1.z0.glb.clouddn.com/ListViewImage.gif)
纯文字
![](http://7jpp2v.com1.z0.glb.clouddn.com/ListViewText.gif)
纯图片
![](http://7jpp2v.com1.z0.glb.clouddn.com/ListViewImage2.gif)
上拉加载
![](https://oc5n93kni.qnssl.com/Simulator%20Screen%20Shot%202016%E5%B9%B412%E6%9C%8825%E6%97%A5%2019.49.44.png?imageView2/2/w/318)
上拉加载完成
![](https://oc5n93kni.qnssl.com/Simulator%20Screen%20Shot%202016%E5%B9%B412%E6%9C%8825%E6%97%A5%2019.49.46.png?imageView2/2/w/318)
props
onRefresh:当触发刷新时的回调 refreshedText: '释放立即刷新' refreshingText: '正在刷新数据中..' refreshText:'下拉可以刷新' useLoadMore:false //是否使用滚动加载功能 即上拉加载 endText:'已经加载完成' endingText:'加载更多数据' indicatorArrowImg: { // 下拉箭头图片和样式 default arrow.png style:{}, url:'' } indicatorImg: { // loading图片和样式 default style:{}, url:'' } refreshType:'normal' // normal image text
收回下拉刷新
{ PullRefresh;}
结束滚动加载
{ PullRefresh;}
建议和反馈
此组件还在不断更新中,如有需求欢迎提出反馈441403517@qq.com
合作开发
此组件目前仅支持ios平台,android平台暂不支持,欢迎有兴趣的小伙伴一起加入开发,将android版的开发出来!