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

查看属性

• HeaderComponent
• renderHeader
• enableRefresh
• headerHeight
• primaryColor
• autoRefresh
• pureScroll
• overScrollBounce
• overScrollDrag
• dragRate
• maxDragRate
• onRefresh
• onPullDownToRefresh
• onReleaseToRefresh
• onHeaderPulling
• onHeaderReleasing
• onHeaderReleased
• onHeaderMoving

查看方法

• finishRefresh

文档

Props

HeaderComponent

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

NOTE

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

renderHeader

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

NOTE

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

enableRefresh

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

headerHeight

设定header的高度

NOTE

自定义 header 时应指定headerHeight。

primaryColor

设置刷新组件的主调色

autoRefresh

NOTE

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

是否自动刷新

pureScroll

是否启用纯滚动

overScrollBounce

是否允许越界回弹

overScrollDrag

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

dragRate

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

maxDragRate

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

onPullDownToRefresh

可下拉刷新时触发

onReleaseToRefresh

可释放刷新时触发

onRefresh

刷新时触发

onHeaderReleased

Header释放时触发

onHeaderPulling

   ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void;

header下拉过程中触发

onHeaderReleasing

   ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void;

header释放过程中触发

onHeaderMoving

   ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void;

header移动过程中触发,包括下拉过程和释放过程。

Methods

finishRefresh

   finishRefresh([params]);

完成刷新

Valid params keys are：

• delayed (number) - 延迟完成刷新的时间
• success (boolean) - 是否刷新成功,暂时没有影响

示例