Nocturnal Programmer's Machine
    Have ideas to improve npm?Join in the discussion! »

    react-native-mjrefresh

    0.7.0 • Public • Published

    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)

    第二步

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

    结束刷新

    示例

    图片名称 图片名称

    Install

    npm i react-native-mjrefresh

    DownloadsWeekly Downloads

    25

    Version

    0.7.0

    License

    ISC

    Unpacked Size

    227 kB

    Total Files

    68

    Last publish

    Collaborators

    • avatar