React Navite踩坑日记（六） —— HUD的封装

前提

RN中似乎没有像我们iOS一样，有比较通用，好用的HUD库，（例如SVProgressHUD或MBProgressHUD）,安卓中叫做TOAST，找了一些第三方库，不是不能用，就是无法满足我的要求。
于是找到了一个react-native-lyhud库。
react-native-lyhud库

第三方库的设计思路与应用

这个第三方库，引入了一个组件，然后将这个组件，与我们的View根组件相关联。然后调用他。
也就是说(以下是示例代码)

import Hud from 'react-native-lyhud'
export default class Examples extends Component {
    render() {
        return (
            
                {
                    this.hud.show('打开')
                }}
                    style={styles.text}>
                    打开！
                
                
                {this.hud = r}} hudType={'error'} textOnly={false}/>
            
        )
    }
}

代码说明

• 上述代码中，Examples 是我们的根组件，里面的View是根组件中的视图
• 是这个第三方组件，通过 ref={r=>{this.hud = r}}产生关联，在上面的组件中调用他的方法this.hud.close()

这里的使用，必须将hud放在根组件中，查看它的源码会发现，在我们按下显示HUD之后，其实他绘制了一个占满当前视图的透明View组件，中间放上HUD. 因此，若将他放在了一个子组件中，那么他绘制的背景组件，只会占满那个大小的父组件。

container: {
        position: 'absolute',
        left: 0,
        right: 0,
        top:0,
        bottom:0,
        alignItems: 'center',
        justifyContent:'center',
        padding:48,
    },

示意图

图片说明
如图所示，如果我们没有讲HUD组件放在根组件内，而是放在了某个子组件内，那么他生成的 HUD View只会占满这个子组件。也就是说，如果我们设置了 backgroundTouchable = {false},那么只会对这个子组件启用。我们去按上面的 返回按键，仍然是可用的。

---

二次封装 —— 做成一个模态的HUD

这个库基本上能满足我们要的效果，但是因为他提供的props较多，样式也不大符合我想要的SVProgressHUD的效果，因此要做一个二次封装

设计思路

首先，将这个第三方库的HUD的样式重新封装，然后提供好以下四个方法。（这四类方法除了Alert外均带有duration —— 显示时长的参数）

• alert —— 带按键和返回事件的提示按钮
  showAlert(msg)
• tip —— 不带文字提示，短暂出现的提示信息
  showTipMsgWithDuration(msg, duration)
• error —— 错误提示
  showErrorMsgWithDuration(msg, duration)
• loading —— 等待提示
  showLoadingMsgWithDuration(msg, duration)

调用示意图

使用方法

import MyHUD from '../MyComponents/MyProgressHUD'
export default class PaycodeGenerator extends Component {
    render() {
        return (
            
                {this.myHUD.showLoadingMsgWithDuration(info,duration)}}
                        showAlert={(msg)=>{this.myHUD.showAlert(msg)}}
                />

                 {this.myHUD = m}} />
            
        );
    }
}

class QRView extends Component {
    render() {
        return (
            
                {this.props.showAlert('警告')}}/>
                 {
                                      this.props.showLoading('成功了吗成功了吗成功了吗成功了吗',1500);
                                  }}>
                
            
        )
    }
}

以上为最简的调用代码。

• 导入封装好的MyProgressHUD组件
• 添加依赖 ref
• 明确哪个组件可能产生HUD —— 这也是目前封装的方法耦合性还是太强的部分。我们必须在根组件中就指定和明确哪些子组件可能产生HUD事件，这样产生时，子组件，利用props将参数内容回传给根组件，产生HUD

最后一点，也是我希望有大神可以指出并帮助优化的部分。希望能真正像SVProressHUD那样，使用一个单例就可以完成提示的弹出。

---

MyProgressHUD 部分的封装代码

import React, {Component} from 'react';
import {
    Alert,
} from 'react-native';

import Hud from 'react-native-lyhud'

export default class MyProgressHUD extends Component {
    constructor(props) {
        super(props);
        this.state = {hudType: 'none', textOnly: false};
    }

    baseShow(msg, duration) {
        this.hud.show(msg);
        if (duration !== 0)
            this.hud.close(duration);
    }

    // 进度提示，当duration为0表示一直等待
    showLoadingMsgWithDuration(msg, duration) {
        this.setState({hudType: 'none', textOnly: false});
        this.baseShow(msg, duration);
    }

    // 弹窗提示
    showAlert(msg) {
        Alert.alert(msg);
    }

    // 错误提示
    showErrorMsgWithDuration(msg, duration) {
        this.setState({hudType: 'error', textOnly: false});
        this.baseShow(msg, duration);
    }

    //  不带图标的提示
    showTipMsgWithDuration(msg, duration) {
        this.setState({textOnly: true});
        this.baseShow(msg, duration);
    }

    render() {
        return (
             {
                     this.hud = r
                 }}
            />
        );
    }
}