react-native-MJRefresh

by react-native-studio

react-native-studio / react-native-MJRefresh

基于ios MJRefresh https://github.com/CoderMJLee/MJRefresh 开发的插件,可提供自定义的弹性刷新

132 Stars 27 Forks Last release: over 1 year ago (0.7.0) Apache License 2.0 96 Commits 18 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Native MJRefreshnpm version

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)
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}

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

}

```

MJRefresh

查看属性

查看方法

文档

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();

结束刷新

示例

图片名称 图片名称

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.