React-native实现各种弹框

2018-08-04 本文已影响2181人临川慕容吹雪

最近学习RN有段时间了，自己边学习也变写了一些RN相关小插件，比如这篇我讲到的react-native的toast弹框，自定义alert弹框和loading弹框，可以给初学RN的有需要朋友提供些参考，当然我也是学习别人的，写的不一定很好，请多多指教，先看看效果吧：

弹框效果.gif

其实实现起来并不是很难，
我实现的功能有，和说一下需要注意的地方：

toast弹框，分三种头部显示，中部显示和底部显示,但是此外我还对键盘做了监听，当键盘弹出的时候，toast依旧可以正常进行中部显示和底部显示而不被键盘遮挡，监听方法很简单,使用RN自带的监听做好监听然后让视图进行偏移就好了:

componentWillMount () {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
    }

    componentWillUnmount() {
        this.state.keyboardHeight = 0;
        // 在页面生命周期结束时，解除定时器，避免内存泄漏
        clearTimeout(this.dismissHandler)
        //移除键盘监听
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }
    //键盘监听事件
    _keyboardDidShow =(e) =>{
        this.state.keyboardHeight=e.endCoordinates.height;
    }

    _keyboardDidHide= ()=> {
        if(this.state) {
            this.state.keyboardHeight = 0;
        }
    }

loading弹框也比较简单，主要使用自定义弹出视图和RN提供菊花组件ActivityIndicator,可参考
强调一点:toast和loading弹框都是用自定弹出背景视图View，它的style属性如下:

container: {
        position: "absolute",
        width: width,
        height: height,
        zIndex: 99999,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: 'center',

    }

自定义alert弹框就比较麻烦一点了，我这边实现的功能自定义头部视图，内容视图，还有可以添加多个底部button按钮。这里我没有背景弹出视图没有自定义，而是用了RN自带的Modal作为弹出背景视图，这样我是是想可以用modal动画弹出方式，目前有三种 slide，fade，none,Modal参考.

其实第三方RN组件别人写好的很多，但是我们自己实现了可以提升我们自己的能力，增加我们自己的成就感不是吗哈哈。

我的这些弹框具体怎么使用和怎么实现的，有兴趣的话可以看我的Demo,里面写的很详细哦，这里就不多做介绍啦！

思考：每次调用，都要在对应的视图里面加入对应插件视图，比如使用我的toast弹框，就需要在对应页面先加入

<ToastView
                  onDismiss={() => {
                      //alert('toast消失了');
                  }}
                  ref={(element) => {
                      this.plToast = element;
                  }}
              />

然后在调用对应方法this.plToast.show('我是测试toast');，是不是觉得有些麻烦和不方便有没有类似iOS和安卓那种只需要调用方法就行了，插入对应弹框视图由方法内部实现呢,不要我们管呢，比如我的这个toast，需要的时候，能不能调用类似Toast.show('我是测试toast')就行了，这个方法当然有很多了，就留给大家思考，提示:可参考 react-native-root-siblings

React-native实现各种弹框

猜你喜欢

热点阅读