react-native-smartrefreshlayout

基于android SmartRefreshLayout的封装

Usage no npm install needed!

<script type="module">
  import reactNativeSmartrefreshlayout from 'https://cdn.skypack.dev/react-native-smartrefreshlayout';
</script>

README

React Native SmartRefreshLayout npm version

React-Native-SmartRefreshLayout是基于Android SmartRefreshLayout 开发的插件 ,
可提供类似ios的弹性刷新,该插件可完全使用React Native进行自定义

HeaderComponent现在支持任意的RN组件,但是需要放在AnyHeader的组件中,
其中onHeaderPulling、onHeaderReleasing和onHeaderMoving的参数为{nativeEvent:{percent,offset,headerHeight}},可用来控制下拉和释放过程中更为精细的动画,
如果下拉和释放过程不需要过程动画,则使用onPullDownToRefresh和onReleaseToRefresh即可实现。
请看示例:Example
HuaweiRefreshControlLottieRefreshControl

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

其他组件查看AnyHeaderDefaultHeaderClassicsHeaderStoreHouseHeader

查看属性

查看方法

文档

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

onPullDownToRefresh

可下拉刷新时触发

Type Required
function No

onReleaseToRefresh

可释放刷新时触发

Type Required
function No

onRefresh

刷新时触发

Type Required
function No

onHeaderReleased

Header释放时触发

Type Required
function No

onHeaderPulling

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

header下拉过程中触发

Type Required
function No

onHeaderReleasing

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

header释放过程中触发

Type Required
function No

onHeaderMoving

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

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

Type Required
function No

Methods

finishRefresh

   finishRefresh([params]);

完成刷新

Name Type Required
params object NO

Valid params keys are:

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

示例

图片名称 图片名称 图片名称