Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f049d5e

Browse files
rebuild readme
1 parent 19634b5 commit f049d5e

File tree

2 files changed

+176
-49
lines changed

2 files changed

+176
-49
lines changed

‎.npmignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.idea
22
Example
3-
images
3+
images
4+
docs

‎README.md‎

Lines changed: 174 additions & 48 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /