1111``` bash
1212npm install --save react-native-smartrefreshlayout
1313```
14- < br >
14+
1515or (已经安装了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<!-- -->
166292<div align =center >
0 commit comments