React Native悬浮层，使用rn-overlay

该博文已与新版不兼容，新版文档请参考这里：
https://github.com/caoyongfeng0214/rn-overlay

React Native中的 Modal component 虽然是个很好用的组件，但它有着一些天生的缺陷，时常被开发者吐槽，在有些场景中不适用。

而众所周知，像 React Native 这样一个依赖开源社区的 Framework，其官方提供的组件是极其有限的，很多时候开发者需要到开源社区去寻找有没有想要的组件。而开源社区中的组件繁多，开发者需要花点时间去寻找、比较，才可能找到想要的。也有可能有满足需求的，但由于名气不够大，而没有被你找到。（非常怀念当年 Microsoft 独霸天下的年代，好矛盾的心态 ～_～）。

Google 了好久，也试用了几个，但没有找到满意的悬浮层组件。因此决定自己动手，丰衣足食。

我的需求如下：

• 可做来做遮罩层、对话框、消息框。
• 可自由控制样式。
• 可固定在屏幕的某个位置，类似 CSS 中的 position:fixed。
• 允许同时存在多个。
• 可用在 Modal comopnent 中。
• 可悬浮在 Modal component 上方，盖住Modal component 。
• 可直接用 Js 代码创建，而不是一定非要使用标签。

是的，Modal component 无法满足以上所有需求，我所试用的几个社区中的组件也无法满足以上所有需求。

可以在这里找到我实现的 React Native 悬浮层组件（rn-overlay）：
https://www.npmjs.com/package/rn-overlay 。

使用比较简单，

第一步，安装

npm install rn-overlay --save

第二步，在你项目的根目录下的 index.js 中引入它

import {
   
   AppRegistry} from 'react-native';
import App from './App';
import {
   
   name as appName} from './app.json';

import 'rn-overlay'; // 加入这行代码

AppRegistry.registerComponent(appName, () => App);

这之后，你就可以在其它文件中像以下这样引入 Overlay 组件了：

import {
   
    Overlay } from 'react-native';

使用方法一：用标签

import React from 'react';
import {
   
    View, Button