Refresh component for React Native (iOS and Android)
Install the package:
npm i react-native-vk-refresh --save or yarn add react-native-vk-refreshimport {BaseRefreshComponent, DefaultRefreshComponent, RefreshStatus, RefreshHeader, RefreshFooter} from 'react-native-vk-refresh'; /** 自定义下拉刷新，支持FlatList，ScrollView等滑动组件*/ <BaseRefreshComponent ContentComponent={FlatList} renderItem={() => <FlatItemCell/>} data={[]} onHeaderRefresh={this._onHeaderRefresh} onFooterRefresh={this._onFooterRefresh} autoLoading={true} /> /** 系统下拉刷新，支持FlatList*/ <DefaultRefreshComponent ContentComponent={FlatList} renderItem={() => <FlatItemCell/>} data={[]} onHeaderRefresh={this._onHeaderRefresh} onFooterRefresh={this._onFooterRefresh} autoLoading={true} /> /** 下拉刷新*/ _onHeaderRefresh = (notify) => { setTimeout(() => { // 刷新完成，无提示 notify(); // 刷新成功 notify(RefreshStatus.HeaderFinish); // 刷新失败 notify(RefreshStatus.HeaderFailure); }, 2000); }; /** 上拉加载*/ _onFooterRefresh = (notify) => { setTimeout(() => { // 继续加载 notify(); // 加载失败 notify(RefreshStatus.FooterFailure); // 加载完成，没有更多数据 notify(RefreshStatus.FooterFinish); }, 2000); };/** 支持 ScrollView*/ <RefreshComponent ContentComponent={ScrollView} onHeaderRefresh={this._onHeaderRefresh} > <FlatItemCell/> <FlatItemCell/> <FlatItemCell/> <FlatItemCell/> <FlatItemCell/> </BaseRefreshComponent>| Prop | Type | Optional | Default | Description |
|---|---|---|---|---|
| ...ContentComponent.propTypes | Yes | 传入 ContentComponent 的所有属性 | ||
| HeaderComponent | object | Yes | BaseRefreshHeader | 自定义刷新组件，继承 BaseRefreshHeader 并实现所有方法 |
| FooterComponent | object | Yes | BaseRefreshFooter | 自定义加载组件，继承 BaseRefreshFooter 并实现所有方法 |
| ContentComponent | object | Yes | ScrollView | 内容组件，支持FlatList, ScrollView或第三方滑动组件 |
| headerHeight | number | Yes | 60 | 刷新组件高度，自定义组件必须填写 |
| onHeaderRefresh | func | Yes | 刷新回调, 带notify(RefreshStatus)参数，通知刷新完成 | |
| onFooterRefresh | func | Yes | 加载回调，带notify(RefreshStatus)参数，通知加载完成 | |
| autoLoading | bool | Yes | false | 组件加载时，是否自动加载数据 |
MIT