中文
English |react-native-pullRefreshScrollView
React Native Pull To Refresh Component for ios platform support ScrollView,ListView
Demo
ScrollView:
ListView:
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
Only text
Only image
LoadMore
End LoadMore
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:
ListView:
如何引入
从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> /> ;}
定制图片
纯文字
纯图片
上拉加载
上拉加载完成
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版的开发出来!