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'}})
不过，还是有两个缺点：
- 不支持修改蒙层背景色 【done】
- 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弹窗-支持多层弹窗
