Skip to content
 
 

Latest commit

 

History

41 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

About

React Native下拉刷新组件 ios 平台 支持ScrollView,ListView

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages