Code Monkey home page Code Monkey logo

react-native-mjrefresh's Introduction

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

安装

第一步

工程目录下运行:

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 (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添加:

工程目录下运行:

react-native link react-native-mjrefresh (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'//rn>=0.55
//import MJRefresh,{ScrollView} from 'react-native-mjrefresh-lower'//rn<=0.54

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

结束刷新

示例

图片名称 图片名称

react-native-mjrefresh's People

Contributors

2534290808 avatar smadey avatar

Watchers

song avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.