@react-native-oh-tpl/react-native-smartrefreshlayout

v0.6.7-0.2.15

Published

11 days ago

基于android SmartRefreshLayout的封装

Downloads

React Native SmartRefreshLayout

React-Native-SmartRefreshLayout是基于Android SmartRefreshLayout 开发的插件 ,可提供类似ios的弹性刷新,该插件可完全使用React Native进行自定义
HeaderComponent现在支持任意的RN组件，但是需要放在AnyHeader的组件中，其中onHeaderPulling、onHeaderReleasing和onHeaderMoving的参数为{nativeEvent:{percent,offset,headerHeight}},可用来控制下拉和释放过程中更为精细的动画, 如果下拉和释放过程不需要过程动画，则使用onPullDownToRefresh和onReleaseToRefresh即可实现。请看示例：Example HuaweiRefreshControl 、 LottieRefreshControl
IOS自定义下拉刷新组件见React-Native-MJRefresh

建议:该组件与lottie-react-native配合使用可获得绝佳的下拉动画效果

安装

第一步

工程目录下运行:

npm install --save react-native-smartrefreshlayout

or (已经安装了yarn)

yarn add react-native-smartrefreshlayout

第二步

工程目录下运行:

react-native link react-native-smartrefreshlayout

使用

在工程中导入：

import {SmartRefreshControl,DefaultHeader} from 'react-native-smartrefreshlayout';
//使用方法和RN官方的RefreshControl类似，
            <ScrollView
                refreshControl={<SmartRefreshControl
                    ref={ref => this.rc = ref}
                    HeaderComponent={<DefaultHeader/>}
                    onRefresh={() => {
                        setTimeout(() => {
                            this.rc && this.rc.finishRefresh();
                        }, 1000)
                    }}
                />}
            >
            </ScrollView>

组件

SmartRefreshControl

其他组件查看AnyHeader、DefaultHeader、ClassicsHeader、StoreHouseHeader

查看属性

查看方法

finishRefresh

文档

Props

`HeaderComponent`

用于渲染SmartRefreshLayout组件的header,默认为DefaultHeader。

NOTE
必须传入插件中给出的Header组件，如AnyHeader,DefaultHeader等

| Type | Required | | ---- | -------- | | Element | No |

`renderHeader`

用于渲染SmartRefreshLayout组件的header,默认为DefaultHeader。

NOTE
必须传入插件中给出的Header组件，如AnyHeader,DefaultHeader等

| Type | Required | | ---- | -------- | | Element/func | No |

`enableRefresh`

是否启用下拉刷新,默认为true

| Type | Required | | ---- | -------- | | boolean | No |

`headerHeight`

设定header的高度

NOTE
自定义 header 时应指定headerHeight。

| Type | Required | | ---- | -------- | | number | No |

`primaryColor`

设置刷新组件的主调色

| Type | Required | | ---- | -------- | | string | No |

`autoRefresh`

NOTE
time字段含义：延迟time毫秒后自动刷新

是否自动刷新

| Type | Required | | ---- | -------- | | object:{refresh:boolean, time:number} | No |

`pureScroll`

是否启用纯滚动

| Type | Required | | ---- | -------- | | boolean | No |

`overScrollBounce`

是否允许越界回弹

| Type | Required | | ---- | -------- | | boolean | No |

`overScrollDrag`

是否启用越界拖动，类似IOS样式。

| Type | Required | | ---- | -------- | | boolean | No |

`dragRate`

设置组件下拉高度与手指真实下拉高度的比值,默认为0.5。

| Type | Required | | ---- | -------- | | number | No |

`maxDragRate`

设置最大显示下拉高度与header标准高度的比值，默认为2.0。

| Type | Required | | ---- | -------- | | number | No |