1
2

XxModuleAlert.show({...});
XxModuleAlert.hide();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

class XxModuleAlert {
  static show() {
    AlertManager.show(<XxModuleView />, {
      key: XxModuleView.name,
    });
  }
  static hide() {
    AlertManager.hide(XxModuleView.name);
  }
}

export XxModuleAlert

const XxModuleView = () => {
	...
	return (...)
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

import React from "react";
import { Dimensions, TouchableOpacity, View } from "react-native";
import RootSiblingsManager from "react-native-root-siblings";

const { width, height } = Dimensions.get("window");

/**
 * 弹窗管理类
 * - 支持同时弹出多个弹窗 （Modal、rn-global-modal 不支持）
 * - 不会遮挡Toast（Modal、rn-global-modal 会遮挡Toast）
 */
class AlertManger {
  static _alertNodes = {}; // { key1: { rootNode: <A/>, onClose: () => {} }, key2: { rootNode: <B/>, onClose: () => {} }

  /**
   * 展示弹窗
   * @param {*} modalView             弹窗内所要展示的内容组件
   * @param {*} options.key                **必传** 弹窗唯一标识
   * @param {*} options.maskStyle          蒙层样式 默认值：{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }
   * @param {*} options.maskTouchClosable  弹窗蒙层是否可点击关闭
   * @param {*} options.closedCallback     弹窗关闭的回调
   * @param {*} options.animationType      [todo] 弹窗动画类型: none | fade | slide-up
   */
  static show(modalView, options) {
    const { key, maskTouchClosable, closedCallback, maskStyle } = options;

    let rootNode;
    const onClose = () => {
      rootNode?.destroy();
      rootNode = null;
      closedCallback?.();
    };
    rootNode = new RootSiblingsManager(
      (
        <View
          style={[
            {
              position: "absolute",
              width: width,
              height: height,
              justifyContent: "center",
              alignItems: "center",
              backgroundColor: "rgba(0,0,0,0.5)",
            },
            maskStyle,
          ]}
        >
          <TouchableOpacity
            style={{
              position: "absolute",
              width: width,
              height: height,
            }}
            activeOpacity={1}
            onPress={(e) => {
              maskTouchClosable && this.hide(key);
            }}
          />
          {modalView}
        </View>
      )
    );
    this._alertNodes[key] = { rootNode, onClose };

    console.log("this._alertNodes:::", this._alertNodes);
  }

  static hide(key) {
    console.log(
      "this._alertNodes?.[key]?.onClose::",
      this._alertNodes?.[key]?.onClose
    );
    this._alertNodes?.[key]?.onClose?.();
    delete this._alertNodes[key];
  }
}

export default AlertManger;

/* ----------------------- Usage ---------------------- */
/*
 * 弹窗开发者 这样封装自己的弹窗
	```
	import AlertManager from "app/components/dialog/AlertManager.js";
	class BbModuleAlert {
	  static show() {
	    AlertManager.show(<BModuleView />, {
	      key: BModuleView.name,
	      maskTouchClosable: true,
	      closedCallback: () => {
	        console.log("BModuleView closedCallback");
	      },
	    });
	  }
	  static hide() {
	    AlertManager.hide(BModuleView.name);
	  }
	}

	export default BbModuleAlert;

	const BModuleView = () => {
	  return (
	    ...
	  )
	}
	```
*/

/*
 * 弹窗调用者 这样调用弹窗
	```
	import BbModuleAlert from "./BbModuleAlert";
	BbModuleAlert.show();
	BbModuleAlert.hide();
	```
*/