RN 全局loading实现方式

用modal方式实现的弹窗，不好用，因为需要嵌入到 视图层，并在视图代码里写 展示隐藏的state变量，耦合太大。
有没有像原生那样随时随地调用 A.show()这么Nice的方式，调用处anywhere都可以，不必拘泥于视图层
方式一: rn-global-modal
方式二: react-native-root-siblings

// import Pop from 'rn-global-modal';
import RootSiblings from 'react-native-root-siblings';
import {ActivityIndicator} from '@ant-design/react-native';
import React from 'react';
import {View, StyleSheet} from 'react-native';

/**
 * @description 全局loading视图
 *
 * 示例
 * import GlobalLoading from '../utils/GlobalLoading';
 * GlobalLoading.startLoading(); //或 GlobalLoading.startLoading({text: '图片上传中'});
 * GlobalLoading.endLoading();
 */

// 方案二
let sibling;
export default class GlobalLoading {
  /**
   * 展示loading
   * @param {text: string} 提示文案
   */
  static startLoading(...args) {
    let text = '';
    for (var element of args) {
      if (element instanceof Object && element.hasOwnProperty('text')) {
        text = element.text;
        break;
      }
    }
    // console.log(Pop);
    let tip = text && text.length ? text : '加载中...';

    // 方案一 global-modal 【iOS native会present一个vc，RCTModalHostViewController】
    // bug：当调用了 该modal方法时，再调一键登录页 将无法再present出来
    // Pop.show(<ActivityIndicator animating toast size="large" text={tip} />, {
    //   animationType: 'none',
    //   maskClosable: false,
    // });

    // 方案二 root-siblings
    // Create a siblings element on screen.
    if (!sibling) {
      console.log('root-siblings new');
      sibling = new RootSiblings(
        (
          <View style={styles.sibling}>
            <ActivityIndicator animating toast size="large" text={tip} />
          </View>
        ),
      );
    } else {
      console.log('root-siblings update');
      sibling.update(
        <View style={styles.sibling}>
          <ActivityIndicator animating toast size="large" text={tip} />
        </View>,
      );
    }
  }

  /**
   * @description: loading销毁
   */
  static endLoading = () => {
    // 方案一
    // Pop.hide();
    // 方案二
    // Destroy it
    sibling.destroy();
  };
}

const styles = StyleSheet.create({
  sibling: {
    position: 'absolute', //需设，否则背景色完全不透明，完全看不到当前页面
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.5)',
    opacity: 1,
  },
});

/**
 * http://wiki.deepleaper.com/pages/viewpage.action?pageId=20513928
 * 描述：全局可调用的 ‘加载中’ 视图
 *
 * 待改进：修改背景色(难点)，萌老师出图。
 * 优点: 调用方便，与页面解耦。
 * 作用：给用户等待中反馈，并可以防止用户多余连续操作。
 * 使用场景：用于 无上下拉刷新、带网络请求的界面 等。比如，一键登录页拉起等待、图片上传等待。
 */

//TODO:方案一 背景色为灰色 无法更改为透明。因为用了Modal，该组件不支持改颜色。待深入研究。
// 方案二，支持修改背景色

//TO OPT:  endLoading万一没被调用，app就彻底无法操作了，怎么办？
//TO ENSURE:超时5s 支持点击mask 隐藏loading
//TO ENSURE:超时15s 自动消失【通信（eg.网络请求的超时时间】