https://github.com/react-native-studio/react-native-mjrefresh
基于ios MJRefresh https://github.com/CoderMJLee/MJRefresh 开发的插件，可提供自定义的弹性刷新
https://github.com/react-native-studio/react-native-mjrefresh
mjrefresh pull react react-native refresh refreshcontrol refreshlayout
Last synced: 13 days ago
JSON representation
基于ios MJRefresh https://github.com/CoderMJLee/MJRefresh 开发的插件，可提供自定义的弹性刷新
- Host: GitHub
- URL: https://github.com/react-native-studio/react-native-mjrefresh
- Owner: react-native-studio
- License: apache-2.0
- Created: 2018-06-25T02:26:48.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T18:56:15.000Z (over 2 years ago)
- Last Synced: 2025-04-02T09:11:12.687Z (20 days ago)
- Topics: mjrefresh, pull, react, react-native, refresh, refreshcontrol, refreshlayout
- Language: Objective-C
- Homepage:
- Size: 17 MB
- Stars: 157
- Watchers: 2
- Forks: 37
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native MJRefresh[](https://badge.fury.io/js/react-native-mjrefresh)
>React-Native-MJRefresh可完成使用React Native对IOS进行自定义下拉刷新设置
>
>onPulling参数为{nativeEvent:percent},结合lottie-react-native可以获得绝佳的下拉刷新效果
>
>自定义详情可见Example:[HuaWeiRefreshControl.js](https://github.com/react-native-studio/react-native-MJRefresh/blob/master/Example/HuaWeiRefreshControl.js)
>
>ListView使用见：[ListViewExample](https://github.com/react-native-studio/react-native-MJRefresh/blob/master/Example49/ListViewExample.js)
>
>FlatList使用见：[FlatListExample](https://github.com/react-native-studio/react-native-MJRefresh/blob/master/Example49/FlatListExample.js)
>
>Android自定义下拉刷新组件见[React-Native-SmartRefreshLayout](https://github.com/react-native-studio/react-native-SmartRefreshLayout)
>
## 安装
### 第一步
工程目录下运行：
```bash
npm install --save react-native-mjrefresh (rn>=0.55.0)
npm install --save react-native-mjrefresh-lower (rn<=0.54)
```
or(已经安装了yarn)
```bash
yarn add react-native-mjrefresh (rn>=0.55)
yarn add react-native-mjrefresh-lower (rn<=0.54)
```
>> Notice
| react-native | react-native-mjrefresh |
|------------------|--------------|
|<0.55 |使用react-native-mjrefresh-lower|
| >=0.55 | * |
| >=0.58 | 0.7.0 |
### 第二步
#### 使用link添加：
工程目录下运行:
```bash
react-native link react-native-mjrefresh （rn>=0.55)
react-native link react-native-mjrefresh-lower（rn<=0.54）
```
#### 使用CocoaPods添加:
podfile添加：
```bash
pod 'RCTMJRefreshHeader', :path => '../node_modules/react-native-mjrefresh'
```
执行：
```bash
pod install
```
### 第三部使用
在工程中导入：
```javascript
import MJRefresh,{ScrollView} from 'react-native-mjrefresh'//rn>=0.55
//import MJRefresh,{ScrollView} from 'react-native-mjrefresh-lower'//rn<=0.54
//该ScrollView兼容官方所有的属性和方法，refreshControl也可以使用官方的RefreshControl
state={
text:'下拉刷新'
}
render() {
return (
this._mjrefresh = ref}
onRefresh={
()=>{
this.setState({
text:'正在刷新'
})
console.log('onRefresh')
setTimeout(()=>{
this._mjrefresh && this._mjrefresh.finishRefresh();
},1000)
}
}
onRefreshIdle={()=>console.log('onRefreshIdle')}
onReleaseToRefresh={()=>{
this.setState({
text:'释放刷新'
})
}}
onPulling={e=>{
if(e.nativeEvent.percent<0.1){
this.setState({
text:'下拉刷新'
})
}
}}
>
{this.state.text}
}
>
);
}
```
## MJRefresh
#### 查看属性
- [`onRefresh`](README.md#onrefresh)
- [`onRefreshIdle`](README.md#onrefreshidle)
- [`onReleaseToRefresh`](README.md#onreleasetorefresh)
- [`onPulling`](README.md#onpulling)
#### 查看方法
- [`beginRefresh`](README.md#beginrefresh)
- [`finishRefresh`](README.md#finishrefresh)
# 文档
## Props
### `onReleaseToRefresh`
可释放刷新时触发
| Type | Required |
| ---- | -------- |
| function | No |
---
### `onRefresh`
刷新时触发
| Type | Required |
| ---- | -------- |
| function | No |
---
### `onRefreshIdle`
刷新闲置时触发
| Type | Required |
| ---- | -------- |
| function | No |
---
#### `onPulling`
```javascript
({nativeEvent: {percent:number}})=>void;
```
header下拉过程中触发
| Type | Required |
| ---- | -------- |
| function | No |
## Methods
### `beginRefresh`
```javascript
beginRefresh();
```
开始刷新
---
### `finishRefresh`
```javascript
finishRefresh();
```
结束刷新
## 示例
