@y-fe/react-native-smartrefreshlayout
v0.6.8
Published
基于android SmartRefreshLayout的封装,增加 beginRefresh 方法
Downloads
1
Readme
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 @y-fe/react-native-smartrefreshlayout
or (已经安装了yarn)
yarn add @y-fe/react-native-smartrefreshlayout
第二步
工程目录下运行:
react-native link @y-fe/react-native-smartrefreshlayout
使用
在工程中导入:
import {SmartRefreshControl,DefaultHeader} from '@y-fe/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
查看方法
文档
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
beginRefresh
beginRefresh();
finishRefresh
finishRefresh([params]);
完成刷新
| Name | Type | Required| | ---- | -------- |-----| | params | object | NO |
Valid params
keys are:
delayed
(number) - 延迟完成刷新的时间success
(boolean) - 是否刷新成功,暂时没有影响