react-native-pullRefreshScrollView
https://github.com/lvming6816077/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
import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';
render() {
return (
<PullRefreshScrollView ref="PullRefresh" onRefresh={()=>this.onRefresh()}>
<View><Text>Scroll1</Text></View>
</PullRefreshScrollView>
);
}
Use in Listview
import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';
render() {
return (
<ListView
renderScrollComponent={(props) => <PullRefreshScrollView onRefresh={(PullRefresh)=>this.onRefresh(PullRefresh)} {...props} />}
dataSource={this.state.dataSource}
renderRow={(rowData) => <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
onRefresh(PullRefresh){
PullRefresh.onRefreshEnd();
}
End the LoadMore
onLoadMore(PullRefresh){
PullRefresh.onLoadMoreEnd();
}
Advice
mail:441403517@qq.com
react-native-pullRefreshScrollView
React Native下拉刷新组件 ios 平台 支持ScrollView,ListView
效果展示
ScrollView:
ListView:
如何引入
从npm上下载组件
npm install --save react-native-pullrefresh-scrollview
在ScrollView中使用
import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';
render() {
return (
<PullRefreshScrollView ref="PullRefresh" onRefresh={()=>this.onRefresh()}>
<View><Text>Scroll1</Text></View>
</PullRefreshScrollView>
);
}
在ListView中使用
import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';
render() {
return (
<ListView
renderScrollComponent={(props) => <PullRefreshScrollView onRefresh={(PullRefresh)=>this.onRefresh(PullRefresh)} {...props} />}
dataSource={this.state.dataSource}
renderRow={(rowData) => <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
收回下拉刷新
onRefresh(PullRefresh){
PullRefresh.onRefreshEnd();
}
结束滚动加载
onLoadMore(PullRefresh){
PullRefresh.onLoadMoreEnd();
}