2019-08-12 react native全局Modal

RN 自带的 Modal

React Native 自带一个Modal 组件，可以在页面上显示一个蒙层，但是，一般情况下，我们是在当前页面中使用Modal组件

Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.

如果你需要在所有页面外显示一个Modal，你需要通过使用 top-level Navigator。

比如，你需要在任意地方使用函数式弹出一个Alert，不依赖于页面或者组件，你可以在app的top-level Navigator外，使用一个Modal组件，与所有页面在同一级，这样，通过发送消息的形式，控制这个Modal的可见性和内容，就可以达到我们的目的了

react-native-modal 库

这个是react-native-community里的一个库：链接

An enhanced, animated and customizable react-native modal
The goal of react-native-modal is expanding the original react-native Modal component by adding animations and styles customization options while still providing a plain-simple API.

是一个增强了的，有动画效果的，可高度定制的 Modal 组件，这个库是基于原生的Modal组件的，扩展了一些动画和自定义样式的支持

• 流畅的 进入/退出 动画
• 简单灵活的的API
• 可自定义的背景透明度、颜色、动画时间
• 监听modal 动画结束
• 根据设备旋转方向自适应
• 可切换
• 可滑动

react-native-root-siblings

还有一个react-native-root-siblings，可以在任意页面，任意地方，呈现一个顶层的组件

This library can add element above the root app component registered by AppRegistry.registerComponent

这个库可以往AppRegistry.registerComponent注册的的app根组件之上添加一个element：

import RootSiblings from 'react-native-root-siblings';
const showAlert = () => new RootSiblings(
<View style={{top: 0,right: 0,bottom: 0,left: 0,backgroundColor: 'red', width: 100, height: 100}}/>
);