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配合使用可获得绝佳的下拉动画效果

安装

#### 第一步
工程目录下运行:


``bash
npm install --save @y-fe/react-native-smartrefreshlayout
`

or (已经安装了yarn)

`bash
yarn add @y-fe/react-native-smartrefreshlayout
`


#### 第二步
工程目录下运行:

`bash
react-native link @y-fe/react-native-smartrefreshlayout
`

使用


在工程中导入：
`js
import {SmartRefreshControl,DefaultHeader} from '@y-fe/react-native-smartrefreshlayout';
//使用方法和RN官方的RefreshControl类似，
refreshControl={ ref={ref => this.rc = ref}
HeaderComponent={}
onRefresh={() => {
setTimeout(() => {
this.rc && this.rc.finishRefresh();
}, 1000)
}}
/>}
>

`

组件

$3

其他组件查看AnyHeader、DefaultHeader、ClassicsHeader、StoreHouseHeader
#### 查看属性
- HeaderComponent
- renderHeader
- enableRefresh
- headerHeight
- primaryColor
- autoRefresh
- pureScroll
- overScrollBounce
- overScrollDrag
- dragRate
- maxDragRate
- onRefresh
- onPullDownToRefresh
- onReleaseToRefresh
- onHeaderPulling
- onHeaderReleasing
- onHeaderReleased
- onHeaderMoving

#### 查看方法

- finishRefresh

文档

$3

#### 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

`javascript
({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void;
`
header下拉过程中触发

| Type | Required |
| ---- | -------- |
| function | No |

---

#### onHeaderReleasing

`javascript
({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void;
`
header释放过程中触发

| Type | Required |
| ---- | -------- |
| function | No |

---

#### onHeaderMoving

`javascript
({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void;
`
header移动过程中触发,包括下拉过程和释放过程。

| Type | Required |
| ---- | -------- |
| function | No |

$3

#### beginRefresh

`javascript
beginRefresh();
`

#### finishRefresh

`javascript
finishRefresh([params]);
`

完成刷新

| Name | Type | Required|
| ---- | -------- |-----|
| params | object | NO |

Valid params keys are：
* delayed (number) - 延迟完成刷新的时间
* success` (boolean) - 是否刷新成功,暂时没有影响

示例