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

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

Regain the PullRefresh

onRefresh(PullRefresh){
        PullRefresh.onRefreshEnd();
}

End the LoadMore

onLoadMore(PullRefresh){
        PullRefresh.onLoadMoreEnd();
}

Advice

mail:[email protected]

中文 | English

react-native-pullRefreshScrollView

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

效果展示

ScrollView:

ListView:

如何引入

从npm上下载组件

在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(PullRefresh){
        PullRefresh.onRefreshEnd();
}

结束滚动加载

onLoadMore(PullRefresh){
        PullRefresh.onLoadMoreEnd();
}

建议和反馈

此组件还在不断更新中，如有需求欢迎提出反馈[email protected]

合作开发

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