超好用的react-native 弹窗容器

rn-global-modal 好用归好用，直接函数式调用，可用于任何地方，彻底与视图解耦(即写代码时，不需要使用标签<符号>把弹窗内容组件嵌入到具体某个视图中)，非常舒服。

可以看看下面的使用方式，感受一下 像原生一样的干净的解耦

import Pop from 'rn-global-modal'
Pop.show(
          <View style={{height: 300, width: '80%', backgroundColor:'red'}}/>
          ,{animationType: 'slide-up', maskClosable: true, onMaskClose: ()=>{}, maskStyle: {opacity:0.2, backgroundColor: 'black'}})

不过，还是有两个缺点：

1. 不支持修改蒙层背景色 【done】
2. toast 层级比 该弹窗层级低。。。 导致toast信息被蒙层盖住【todo】

缺点1- 背景色设置 - 解决方式

diff --git a/node_modules/rn-global-modal/index.js b/node_modules/rn-global-modal/index.js
index abdfafc..076cca7 100644
--- a/node_modules/rn-global-modal/index.js
+++ b/node_modules/rn-global-modal/index.js
@@ -89,7 +89,7 @@ var _PopContainer = function (_React$Component) {
                 { style: _styles.container },
                 _react2['default'].createElement(
                     _Modal2['default'],
-                    { style: [_styles.modalContainer, this.props.style], animateAppear: true, onAnimationEnd: this.props.onAnimationEnd, animationType: this.props.animationType, wrapStyle: _styles.wrap, visible: this.state.visible, maskClosable: this.props.maskClosable, onClose: this.onMaskClose },
+                    { style: [_styles.modalContainer, this.props.style], maskStyle: this.props.maskStyle, animateAppear: true, onAnimationEnd: this.props.onAnimationEnd, animationType: this.props.animationType, wrapStyle: _styles.wrap, visible: this.state.visible, maskClosable: this.props.maskClosable, onClose: this.onMaskClose },
                     this.props.children
                 )
             );
@@ -109,7 +109,8 @@ exports['default'] = {
         var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
             animationType: 'slide-down',
             maskClosable: true,
-            onMaskClose: function onMaskClose() {}
+            onMaskClose: function onMaskClose() {},
+            maskStyle: null,
         };
 
         _rnTopview2['default'].set(_react2['default'].createElement(
@@ -120,7 +121,7 @@ exports['default'] = {
                     if (!visible) {
                         _rnTopview2['default'].remove();
                     }
-                }, visible: true },
+                }, visible: true, maskStyle: options.maskStyle },
             content
         ));
     },

作者的github源码 居然无法提交PR

我只能fork修改了 https://github.com/zyestin/Pop

借助'rn-global-modal'的函数调用用法，可以大大方便我们封装许多 如函数调用这样方式的、好用的 组件管理器，比如 任意处可调用的 输入框弹窗

其它缺点

• 层级高于toast ，导致toast看不到/看不清
• 无法多个弹窗存在于视图层

更新：找到解决方式了
见 极简用法的RN弹窗-支持多层弹窗