11
11
``` bash
12
12
npm install --save react-native-smartrefreshlayout
13
13
```
14
- < br >
14
+
15
15
or (已经安装了yarn)
16
16
<br >
17
17
@@ -46,6 +46,7 @@ import {SmartRefreshControl,DefaultHeader} from 'react-native-smartrefreshlayout
46
46
```
47
47
## 组件
48
48
### SmartRefreshControl
49
+ 其他组件查看[ AnyHeader] ( ./AnyHeader.md ) 、[ DefaultHeader] ( ./DefaualtHeader.md ) 、[ ClassicsHeader] ( ./DefaultHeader.md ) 、[ StoreHouseHeader] ( ./StoreHouse.md )
49
50
#### 查看属性
50
51
- [ ` HeaderComponent ` ] ( README.md#headercomponent )
51
52
- [ ` enableRefresh ` ] ( README.md#enablerefresh )
@@ -93,7 +94,9 @@ import {SmartRefreshControl,DefaultHeader} from 'react-native-smartrefreshlayout
93
94
94
95
| Type | Required |
95
96
| ---- | -------- |
96
- | bool | No |
97
+ | boolean | No |
98
+
99
+ ---
97
100
98
101
#### ` headerHeight `
99
102
@@ -107,27 +110,174 @@ import {SmartRefreshControl,DefaultHeader} from 'react-native-smartrefreshlayout
107
110
| ---- | -------- |
108
111
| number | No |
109
112
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
+
131
281
132
282
注意:HeaderComponet现在支持任意的RN组件,但是需要放在AnyHeader的组件中,其中onHeaderPulling、onHeaderReleasing和onHeaderMoving的参数为{nativeEvent:{percent,offset,headerHeight}},可用来控制下拉和释放过程中更为精细的动画
133
283
如果下拉和释放过程不需要过程动画,则使用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
136
286
137
287
138
288
建议:该组件与[ 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
+
164
290
## 示例
165
291
<!-- -->
166
292
<div align =center >
0 commit comments