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下拉刷新组件 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();
}##建议和反馈 此组件还在不断更新中，如有需求欢迎提出反馈441403517@qq.com