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

安装

第一步

工程目录下运行：
```bash npm install --save react-native-mjrefresh (rn>=0.55.0)

npm install --save react-native-mjrefresh-lower (rn<=0.54)

or(已经安装了yarn)

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}

        }
    >
      <view style="{{flex:1,height:1000,backgroundColor:'#ddd'}}">
      </view>
    </scrollview>
);

}

```

MJRefresh

查看属性

• onRefresh

• onRefreshIdle

• onReleaseToRefresh

• onPulling

查看方法

• beginRefresh

• finishRefresh

文档

Props

onReleaseToRefresh

可释放刷新时触发

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

onRefresh

刷新时触发

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

onRefreshIdle

刷新闲置时触发

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

onPulling

   ({nativeEvent: {percent:number}})=>void;

header下拉过程中触发

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

Methods

beginRefresh

   beginRefresh();

开始刷新

finishRefresh

   finishRefresh();

结束刷新

示例