React Native MJRefresh

>React-Native-MJRefresh可完成使用React Native对IOS进行自定义下拉刷新设置
>
>onPulling参数为{nativeEvent:percent},结合lottie-react-native可以获得绝佳的下拉刷新效果
>
>自定义详情可见Example:HuaWeiRefreshControl.js
>
>ListView使用见：ListViewExample
>
>FlatList使用见：FlatListExample
>
>Android自定义下拉刷新组件见React-Native-SmartRefreshLayout
>

安装

$3

工程目录下运行：

``bash
npm install --save react-native-mjrefresh-xys (rn>=0.55.0)

npm install --save react-native-mjrefresh-lower (rn<=0.54)
`
or(已经安装了yarn)

`bash
yarn add react-native-mjrefresh-xys (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 |

$3

#### 使用link添加：
工程目录下运行:
`bash
react-native link react-native-mjrefresh-xys （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
`

$3

在工程中导入：
`javascript
import MJRefresh,{ScrollView} from 'react-native-mjrefresh-xys'//rn>=0.55
//import MJRefresh,{ScrollView} from 'react-native-mjrefresh-lower'//rn<=0.54

//该ScrollView兼容官方所有的属性和方法，refreshControl也可以使用官方的RefreshControl
state={
text:'下拉刷新'
}
render() {
return (
refreshControl={
ref={ref=>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:'下拉刷新'
})
}
}}
>
justifyContent:'center',
alignItems:'center',flexDirection:'row'
}}>
{this.state.text}


}
>



);
}
`


MJRefresh

#### 查看属性

- onRefresh
- onRefreshIdle
- onReleaseToRefresh
- onPulling

#### 查看方法

- beginRefresh
- finishRefresh

文档

Props

$3

可释放刷新时触发

| Type | Required |
| ---- | -------- |
| function | No |

---

$3

刷新时触发

| Type | Required |
| ---- | -------- |
| function | No |

---

$3

刷新闲置时触发

| Type | Required |
| ---- | -------- |
| function | No |

---

#### onPulling

`javascript
({nativeEvent: {percent:number}})=>void;
`
header下拉过程中触发

| Type | Required |
| ---- | -------- |
| function | No |

Methods

$3

`javascript
beginRefresh();
`

开始刷新

---

$3

`javascript
finishRefresh();
``

结束刷新

示例