❤
npm
Sign UpSign In

react-native-pullrefresh-scrollview

1.1.3 • Public • Published

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
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

中文 | English

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();
}

建议和反馈

此组件还在不断更新中，如有需求欢迎提出反馈441403517@qq.com

合作开发

此组件目前仅支持ios平台，android平台暂不支持，欢迎有兴趣的小伙伴一起加入开发，将android版的开发出来！

Readme

Keywords

Package Sidebar

Install

npm i react-native-pullrefresh-scrollview

Repository

github.com/lvming6816077/react-native-pullRefreshScrollView

Homepage

github.com/lvming6816077/react-native-pullRefreshScrollView#readme

Weekly Downloads

2

Version

1.1.3

License

ISC

Last publish

Collaborators

  • lvming6816077
Try on RunKit
Report malware