Skip to content

Commit f049d5e

Browse files
committed
rebuild readme
1 parent 19634b5 commit f049d5e

File tree

2 files changed

+176
-49
lines changed

2 files changed

+176
-49
lines changed

.npmignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.idea
22
Example
3-
images
3+
images
4+
docs

README.md

+174-48
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
```bash
1212
npm install --save react-native-smartrefreshlayout
1313
```
14-
<br>
14+
1515
or (已经安装了yarn)
1616
<br>
1717

@@ -46,6 +46,7 @@ import {SmartRefreshControl,DefaultHeader} from 'react-native-smartrefreshlayout
4646
```
4747
## 组件
4848
### SmartRefreshControl
49+
其他组件查看[AnyHeader](./AnyHeader.md)[DefaultHeader](./DefaualtHeader.md)[ClassicsHeader](./DefaultHeader.md)[StoreHouseHeader](./StoreHouse.md)
4950
#### 查看属性
5051
- [`HeaderComponent`](README.md#headercomponent)
5152
- [`enableRefresh`](README.md#enablerefresh)
@@ -93,7 +94,9 @@ import {SmartRefreshControl,DefaultHeader} from 'react-native-smartrefreshlayout
9394

9495
| Type | Required |
9596
| ---- | -------- |
96-
| bool | No |
97+
| boolean | No |
98+
99+
---
97100

98101
#### `headerHeight`
99102

@@ -107,27 +110,174 @@ import {SmartRefreshControl,DefaultHeader} from 'react-native-smartrefreshlayout
107110
| ---- | -------- |
108111
| number | No |
109112

110-
#### 属性
111-
#### 属性表格
112-
|属性名|类型|描述|
113-
|:---:|:---:|:---:|
114-
|onRefresh|func|刷新触发|
115-
|onPullDownToRefresh|func|可下拉刷新时触发|
116-
|onReleaseToRefresh|func|可释放刷新时触发|
117-
|onHeaderPulling|func|header下拉过程触发|
118-
|onHeaderReleasing|func|header释放过程触发|
119-
|onHeaderReleased|func|header释放时触发|
120-
|onHeaderMoving|func|header移动时触发(包括下拉和释放过程)|
121-
|enableRefresh|bool|是否启用刷新|
122-
|headerHeight|number|设置Header的高度|
123-
|primaryColor|string|刷新控件主调色|
124-
|autoRefresh|{refresh,timeout}|设置自动刷新|
125-
|HeaderComponent|Component|refreshcontrol的header|
126-
|pureScroll|bool|是否纯滚动|
127-
|overScrollBounce|bool|是否越界回弹|
128-
|overScrollDrag|bool|是否使用越界拖动,类似IOS样式|
129-
|dragRate|number|为(显示下拉高度/手指真实下拉高度=阻尼效果)|
130-
|maxDragRate|number|最大显示下拉高度/Header标准高度|
113+
---
114+
115+
#### `primaryColor`
116+
117+
设置刷新组件的主调色
118+
119+
| Type | Required |
120+
| ---- | -------- |
121+
| string | No |
122+
123+
---
124+
125+
#### `autoRefresh`
126+
127+
是否自动刷新
128+
129+
| Type | Required |
130+
| ---- | -------- |
131+
| object:{refresh:boolean, timeout:number} | No |
132+
133+
---
134+
135+
#### `pureScroll`
136+
137+
是否启用纯滚动
138+
139+
| Type | Required |
140+
| ---- | -------- |
141+
| boolean | No |
142+
143+
---
144+
145+
#### `overScrollBounce`
146+
147+
是否允许越界回弹
148+
149+
| Type | Required |
150+
| ---- | -------- |
151+
| boolean | No |
152+
153+
---
154+
155+
#### `overScrollDrag`
156+
157+
是否启用越界拖动,类似IOS样式。
158+
159+
| Type | Required |
160+
| ---- | -------- |
161+
| boolean | No |
162+
163+
---
164+
165+
#### `dragRate`
166+
167+
设置组件下拉高度与手指真实下拉高度的比值,默认为0.5。
168+
169+
| Type | Required |
170+
| ---- | -------- |
171+
| number | No |
172+
173+
---
174+
175+
#### `maxDragRate`
176+
177+
设置最大显示下拉高度与header标准高度的比值,默认为2.0。
178+
179+
| Type | Required |
180+
| ---- | -------- |
181+
| number | No |
182+
183+
---
184+
185+
#### `onPullDownToRefresh`
186+
187+
可下拉刷新时触发
188+
189+
| Type | Required |
190+
| ---- | -------- |
191+
| function | No |
192+
193+
---
194+
195+
#### `onReleaseToRefresh`
196+
197+
可释放刷新时触发
198+
199+
| Type | Required |
200+
| ---- | -------- |
201+
| function | No |
202+
203+
---
204+
205+
#### `onRefresh`
206+
207+
刷新时触发
208+
209+
| Type | Required |
210+
| ---- | -------- |
211+
| function | No |
212+
213+
---
214+
215+
#### `onHeaderReleased`
216+
217+
Header释放时触发
218+
219+
| Type | Required |
220+
| ---- | -------- |
221+
| function | No |
222+
223+
---
224+
225+
#### `onHeaderPulling`
226+
227+
```javascript
228+
({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void;
229+
```
230+
header下拉过程中触发
231+
232+
| Type | Required |
233+
| ---- | -------- |
234+
| function | No |
235+
236+
---
237+
238+
#### `onHeaderReleasing`
239+
240+
```javascript
241+
({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void;
242+
```
243+
header释放过程中触发
244+
245+
| Type | Required |
246+
| ---- | -------- |
247+
| function | No |
248+
249+
---
250+
251+
#### `onHeaderMoving`
252+
253+
```javascript
254+
({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void;
255+
```
256+
header移动过程中触发,包括下拉过程和释放过程。
257+
258+
| Type | Required |
259+
| ---- | -------- |
260+
| function | No |
261+
262+
### Methods
263+
264+
#### `finishRefresh`
265+
266+
```javascript
267+
finishRefresh([params]);
268+
```
269+
270+
完成刷新
271+
272+
| Name | Type | Required|
273+
| ---- | -------- |-----|
274+
| params | object | NO |
275+
276+
Valid `params` keys are:
277+
* `delayed` (number) - 延迟完成刷新的时间
278+
* `success` (boolean) - 是否刷新成功,暂时没有影响
279+
280+
131281

132282
注意:HeaderComponet现在支持任意的RN组件,但是需要放在AnyHeader的组件中,其中onHeaderPulling、onHeaderReleasing和onHeaderMoving的参数为{nativeEvent:{percent,offset,headerHeight}},可用来控制下拉和释放过程中更为精细的动画
133283
如果下拉和释放过程不需要过程动画,则使用onPullDownToRefresh和onReleaseToRefresh即可实现,请看示例:Example <br/> [HuaweiRefreshControl](https://github.com/react-native-studio/react-native-SmartRefreshLayout/blob/master/Example/HuaWeiRefreshControl.js)
@@ -136,31 +286,7 @@ import {SmartRefreshControl,DefaultHeader} from 'react-native-smartrefreshlayout
136286

137287

138288
建议:该组件与[lottie-react-native](https://github.com/react-community/lottie-react-native)配合使用可获得绝佳的下拉动画效果
139-
#### 方法表格
140-
|方法名|参数|描述|
141-
|:---:|:---:|:---:|
142-
|finishRefresh|{delayed:number,success:bool}|完成刷新|
143-
144-
### AnyHeader
145-
#### 属性表格
146-
|属性名|类型|描述|
147-
|:---:|:---:|:---:|
148-
|primaryColor|string|主题色|
149-
150-
### ClassicsHeader/DefaultHeader
151-
#### 属性表格
152-
|属性名|类型|描述|
153-
|:---:|:---:|:---:|
154-
|primaryColor|string|主题色|
155-
|accentColor|string|强调色|
156-
157-
### StoreHouseHeader
158-
#### 属性表格
159-
|属性名|类型|描述|
160-
|:---:|:---:|:---:|
161-
|text|string|文字(目前只支持英文)|
162-
|textColor|string|文字颜色|
163-
|lineWidth|number|线宽|
289+
164290
## 示例
165291
<!--![image](https://github.com/2534290808/react-native-android-danmaku/blob/master/images/Screenshot_1513176625.png)-->
166292
<div align=center>

0 commit comments

Comments
 (0)