English | 中文

react-native-pullRefreshScrollView

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

中文 | English

react-native-pullRefreshScrollView

效果展示

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

建议和反馈

合作开发