|
1 | | -# react-native-SmartRefreshLayout(完全可使用RN自定义的下拉刷新插件)[](https://badge.fury.io/js/react-native-smartrefreshlayout) |
2 | | -基于android SmartRefreshLayout https://github.com/scwang90/SmartRefreshLayout 开发的插件,可提供类似ios的弹性刷新,如果你喜欢,请不要吝啬你的 :smile: star :smile: |
| 1 | +# React Native SmartRefreshLayout[](https://badge.fury.io/js/react-native-smartrefreshlayout) |
3 | 2 |
|
4 | | -***IOS*** 自定义下拉刷新组件见[react-native-MJRefresh](https://github.com/react-native-studio/react-native-MJRefresh) |
| 3 | +>React-Native-SmartRefreshLayout是基于[Android SmartRefreshLayout](https://github.com/scwang90/SmartRefreshLayout) 开发的插件,可提供类似ios的弹性刷新,该插件可完全使用React Native进行自定义 |
5 | 4 | |
| 5 | +>IOS自定义下拉刷新组件见[React-Native-MJRefresh](https://github.com/react-native-studio/react-native-MJRefresh) |
6 | 6 | |
7 | | -## 第一步 |
8 | | -工程目录下运行<br> `npm install --save react-native-smartrefreshlayout`<br> 或者<br> `yarn add react-native-smartrefreshlayout`(已经安装了yarn) |
9 | | -## 第二步 |
10 | | -运行 `react-native link react-native-smartrefreshlayout` |
11 | | -## 第三部使用 |
| 7 | +## 安装 |
| 8 | +#### 第一步 |
| 9 | +工程目录下运行: |
| 10 | +<br> |
| 11 | +```bash |
| 12 | +npm install --save react-native-smartrefreshlayout |
| 13 | +``` |
| 14 | +<br> |
| 15 | +or (已经安装了yarn) |
| 16 | +<br> |
| 17 | + |
| 18 | +```bash |
| 19 | +yarn add react-native-smartrefreshlayout |
| 20 | +``` |
| 21 | + |
| 22 | + |
| 23 | +#### 第二步 |
| 24 | +工程目录下运行:<br> |
| 25 | +```bash |
| 26 | +react-native link react-native-smartrefreshlayout |
| 27 | +``` |
| 28 | + |
| 29 | +## 使用 |
12 | 30 | 在工程中导入: |
13 | 31 | ```js |
14 | | -import {SmartRefreshControl,ClassicsHeader,StoreHouseHeader,DefaultHeader} from 'react-native-smartrefreshlayout'; |
15 | | - |
| 32 | +import {SmartRefreshControl,DefaultHeader} from 'react-native-smartrefreshlayout'; |
16 | 33 | //使用方法和RN官方的RefreshControl类似, |
17 | | -<ScrollView |
18 | | - refreshControl={<SmartRefreshControl |
19 | | - ref={refreshcontrol=>this.refreshControl=refreshcontrol} |
20 | | - HeaderComponent={<DefaultHeader/>} |
21 | | - onRefresh={()=>{ |
22 | | - setTimeout(()=>{ |
23 | | - this.refreshControl && this.refreshControl.finishRefresh(); |
24 | | - },1000) |
25 | | - }} |
26 | | - />} |
27 | | -> |
28 | | -</ScrollView> |
| 34 | +<ScrollView |
| 35 | + refreshControl={<SmartRefreshControl |
| 36 | + ref={ref=>this.rc= ref} |
| 37 | + HeaderComponent={<DefaultHeader/>} |
| 38 | + onRefresh={()=>{ |
| 39 | + setTimeout(()=>{ |
| 40 | + this.rc && this.rc.finishRefresh(); |
| 41 | + }, 1000) |
| 42 | + }} |
| 43 | + />} |
| 44 | +> |
| 45 | +</ScrollView> |
29 | 46 | ``` |
30 | 47 | ## 组件 |
31 | 48 | ### SmartRefreshControl |
| 49 | +#### 查看属性 |
| 50 | +- [`HeaderComponent`](README.md#headercomponent) |
| 51 | +- [`enableRefresh`](README.md#enablerefresh) |
| 52 | +- [`headerHeight`](README.md#headerHeight) |
| 53 | +- [`primaryColor`](README.md#primarycolor) |
| 54 | +- [`autoRefresh`](README.md#autorefresh) |
| 55 | +- [`pureScroll`](README.md#purescroll) |
| 56 | +- [`overScrollBounce`](README.md#overscrollbounce) |
| 57 | +- [`overScrollDrag`](README.md#overscrolldrag) |
| 58 | +- [`dragRate`](README.md#dragrate) |
| 59 | +- [`maxDragRate`](README.md#maxdragrate) |
| 60 | +- [`onRefresh`](README.md#onrefresh) |
| 61 | +- [`onPullDownToRefresh`](README.md#onpulldowntorefresh) |
| 62 | +- [`onReleaseToRefresh`](README.md#onreleasetorefresh) |
| 63 | +- [`onHeaderPulling`](README.md#onheaderpulling) |
| 64 | +- [`onHeaderReleasing`](README.md#onheaderreleasing) |
| 65 | +- [`onHeaderReleased`](README.md#onheaderreleased) |
| 66 | +- [`onHeaderMoving`](README.md#onheadermoving) |
| 67 | + |
| 68 | +#### 查看方法 |
| 69 | + |
| 70 | +- [`finishRefresh`](README.md#finishrefresh) |
| 71 | + |
| 72 | +## 文档 |
| 73 | + |
| 74 | +### Props |
| 75 | + |
| 76 | +#### `HeaderComponent` |
| 77 | + |
| 78 | +用于渲染SmartRefreshLayout组件的header,默认为DefaultHeader。 |
| 79 | + |
| 80 | +>**NOTE** |
| 81 | +> |
| 82 | +>必须传入插件中给出的Header组件,如AnyHeader,DefaultHeader等 |
| 83 | + |
| 84 | +| Type | Required | |
| 85 | +| ---- | -------- | |
| 86 | +| Element | No | |
| 87 | + |
| 88 | +--- |
| 89 | + |
| 90 | +#### `enableRefresh` |
| 91 | + |
| 92 | +是否启用下拉刷新,默认为true |
| 93 | + |
| 94 | +| Type | Required | |
| 95 | +| ---- | -------- | |
| 96 | +| bool | No | |
| 97 | + |
| 98 | +#### `headerHeight` |
| 99 | + |
| 100 | +设定header的高度 |
| 101 | + |
| 102 | +>**NOTE** |
| 103 | +> |
| 104 | +>自定义 header 时应指定headerHeight。 |
| 105 | + |
| 106 | +| Type | Required | |
| 107 | +| ---- | -------- | |
| 108 | +| number | No | |
| 109 | + |
| 110 | +#### 属性 |
32 | 111 | #### 属性表格 |
33 | 112 | |属性名|类型|描述| |
34 | 113 | |:---:|:---:|:---:| |
|
0 commit comments