# rntpc_react-native-SmartRefreshLayout **Repository Path**: openharmony-sig/rntpc_react-native-SmartRefreshLayout ## Basic Information - **Project Name**: rntpc_react-native-SmartRefreshLayout - **Description**: No description available - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: https://gitee.com/openharmony-sig/rntpc_react-native-SmartRefreshLayout - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-10-14 - **Last Updated**: 2025-05-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 🚨 **重要提示 | IMPORTANT** > > **⚠️ 此代码仓已归档。新地址请访问 [rntpc_react-native-SmartRefreshLayout](https://gitcode.com/openharmony-sig/rntpc_react-native-SmartRefreshLayout)。| ⚠️ This repository has been archived. For the new address, please visit [rntpc_react-native-SmartRefreshLayout](https://gitcode.com/openharmony-sig/rntpc_react-native-SmartRefreshLayout).** > --- > # React Native SmartRefreshLayout [![npm version](https://badge.fury.io/js/react-native-smartrefreshlayout.svg)](https://badge.fury.io/js/react-native-smartrefreshlayout) >React-Native-SmartRefreshLayout是基于[Android SmartRefreshLayout](https://github.com/scwang90/SmartRefreshLayout) 开发的插件 >,
可提供类似ios的弹性刷新,该插件可完全使用React Native进行自定义 > >HeaderComponent现在支持任意的RN组件，但是需要放在AnyHeader的组件中，
其中onHeaderPulling、onHeaderReleasing和onHeaderMoving的参数为{nativeEvent:{percent,offset,headerHeight}},可用来控制下拉和释放过程中更为精细的动画,
> 如果下拉和释放过程不需要过程动画，则使用onPullDownToRefresh和onReleaseToRefresh即可实现。 >
请看示例：Example
[HuaweiRefreshControl](https://github.com/react-native-studio/react-native-SmartRefreshLayout/blob/master/Example/HuaWeiRefreshControl.js) >、 [LottieRefreshControl](https://github.com/react-native-studio/react-native-SmartRefreshLayout/blob/master/Example/LottieRefreshControl.js) > >IOS自定义下拉刷新组件见[React-Native-MJRefresh](https://github.com/react-native-studio/react-native-MJRefresh) > > >建议:该组件与[lottie-react-native](https://github.com/react-community/lottie-react-native)配合使用可获得绝佳的下拉动画效果 ## 安装 #### 第一步工程目录下运行:
```bash npm install --save react-native-smartrefreshlayout ``` or (已经安装了yarn)
```bash yarn add react-native-smartrefreshlayout ``` #### 第二步工程目录下运行:
```bash react-native link react-native-smartrefreshlayout ``` ## 使用在工程中导入： ```js import {SmartRefreshControl,DefaultHeader} from 'react-native-smartrefreshlayout'; //使用方法和RN官方的RefreshControl类似， this.rc = ref} HeaderComponent={} onRefresh={() => { setTimeout(() => { this.rc && this.rc.finishRefresh(); }, 1000) }} />} > ``` ## 组件 ### SmartRefreshControl 其他组件查看[AnyHeader](./docs/AnyHeader.md)、[DefaultHeader](./docs/DefaultHeader.md)、[ClassicsHeader](./docs/DefaultHeader.md)、[StoreHouseHeader](./docs/StoreHouse.md) #### 查看属性 - [`HeaderComponent`](README.md#headercomponent) - [`renderHeader`](README.md#renderHeader) - [`enableRefresh`](README.md#enablerefresh) - [`headerHeight`](README.md#headerHeight) - [`primaryColor`](README.md#primarycolor) - [`autoRefresh`](README.md#autorefresh) - [`pureScroll`](README.md#purescroll) - [`overScrollBounce`](README.md#overscrollbounce) - [`overScrollDrag`](README.md#overscrolldrag) - [`dragRate`](README.md#dragrate) - [`maxDragRate`](README.md#maxdragrate) - [`onRefresh`](README.md#onrefresh) - [`onPullDownToRefresh`](README.md#onpulldowntorefresh) - [`onReleaseToRefresh`](README.md#onreleasetorefresh) - [`onHeaderPulling`](README.md#onheaderpulling) - [`onHeaderReleasing`](README.md#onheaderreleasing) - [`onHeaderReleased`](README.md#onheaderreleased) - [`onHeaderMoving`](README.md#onheadermoving) #### 查看方法 - [`finishRefresh`](README.md#finishrefresh) ## 文档 ### Props #### `HeaderComponent` 用于渲染SmartRefreshLayout组件的header,默认为DefaultHeader。 >**NOTE** > >必须传入插件中给出的Header组件，如AnyHeader,DefaultHeader等 | Type | Required | | ---- | -------- | | Element | No | --- #### `renderHeader` 用于渲染SmartRefreshLayout组件的header,默认为DefaultHeader。 >**NOTE** > >必须传入插件中给出的Header组件，如AnyHeader,DefaultHeader等 | Type | Required | | ---- | -------- | | Element/func | No | --- #### `enableRefresh` 是否启用下拉刷新,默认为true | Type | Required | | ---- | -------- | | boolean | No | --- #### `headerHeight` 设定header的高度 >**NOTE** > >自定义 header 时应指定headerHeight。 | Type | Required | | ---- | -------- | | number | No | --- #### `primaryColor` 设置刷新组件的主调色 | Type | Required | | ---- | -------- | | string | No | --- #### `autoRefresh` >***NOTE*** > >time字段含义：延迟time毫秒后自动刷新是否自动刷新 | Type | Required | | ---- | -------- | | object:{refresh:boolean, time:number} | No | --- #### `pureScroll` 是否启用纯滚动 | Type | Required | | ---- | -------- | | boolean | No | --- #### `overScrollBounce` 是否允许越界回弹 | Type | Required | | ---- | -------- | | boolean | No | --- #### `overScrollDrag` 是否启用越界拖动，类似IOS样式。 | Type | Required | | ---- | -------- | | boolean | No | --- #### `dragRate` 设置组件下拉高度与手指真实下拉高度的比值,默认为0.5。 | Type | Required | | ---- | -------- | | number | No | --- #### `maxDragRate` 设置最大显示下拉高度与header标准高度的比值，默认为2.0。 | Type | Required | | ---- | -------- | | number | No | --- #### `onPullDownToRefresh` 可下拉刷新时触发 | Type | Required | | ---- | -------- | | function | No | --- #### `onReleaseToRefresh` 可释放刷新时触发 | Type | Required | | ---- | -------- | | function | No | --- #### `onRefresh` 刷新时触发 | Type | Required | | ---- | -------- | | function | No | --- #### `onHeaderReleased` Header释放时触发 | Type | Required | | ---- | -------- | | function | No | --- #### `onHeaderPulling` ```javascript ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void; ``` header下拉过程中触发 | Type | Required | | ---- | -------- | | function | No | --- #### `onHeaderReleasing` ```javascript ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void; ``` header释放过程中触发 | Type | Required | | ---- | -------- | | function | No | --- #### `onHeaderMoving` ```javascript ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void; ``` header移动过程中触发,包括下拉过程和释放过程。 | Type | Required | | ---- | -------- | | function | No | ### Methods #### `finishRefresh` ```javascript finishRefresh([params]); ``` 完成刷新 | Name | Type | Required| | ---- | -------- |-----| | params | object | NO | Valid `params` keys are： * `delayed` (number) - 延迟完成刷新的时间 * `success` (boolean) - 是否刷新成功,暂时没有影响 ## 示例