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 >

安装

第一步

工程目录下运行：

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

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

or(已经安装了yarn)

 yarn add react-native-mjrefresh-xys (rn>=0.55)

 yarn add react-native-mjrefresh-lower (rn<=0.54)

>> Notice

第二步

使用link添加：

工程目录下运行:

react-native link react-native-mjrefresh-xys （rn>=0.55)

react-native link react-native-mjrefresh-lower（rn<=0.54）

使用CocoaPods添加:

podfile添加：

  pod 'RCTMJRefreshHeader', :path => '../node_modules/react-native-mjrefresh'

执行：

  pod install

第三部使用

在工程中导入：

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 (
        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:'下拉刷新'
                          })
                      }
                  }}
              >
                
              
            }
        >
          
        
    );
  }

MJRefresh

查看属性

• onRefresh
• onRefreshIdle
• onReleaseToRefresh
• onPulling

查看方法

• beginRefresh
• finishRefresh

文档

Props

onReleaseToRefresh

可释放刷新时触发

onRefresh

刷新时触发

onRefreshIdle

刷新闲置时触发

onPulling

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

header下拉过程中触发

Methods

beginRefresh

   beginRefresh();

开始刷新

finishRefresh

   finishRefresh();

结束刷新

示例