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, Overlay } from 'react-native';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            visible: false
        };
    }

    onBtnShowClick = () => {
        this.setState({
            visible: true
        });
    }

    onCloseClick = () => {
        this.setState({
            visible: false
        });
    }

    onShow = () => {
        console.log('Overlay 打开了');
    }

    onClose = () => {
        console.log('Overlay 关闭了');
    }

    render() {
        return <View style={{paddingTop: 200}}>
            <Button title="点我" onPress={this.onBtnShowClick}/>
            <Overlay visible={this.state.visible}
                onShow={this.onShow}
                onClose={this.onClose}
                style={{ justifyContent:"center" }}>
                <View style={{ paddingVertical:80, backgroundColor:"#fff" }}>
                    <Button title="关闭" onPress={this.onCloseClick}/>
                </View>
            </Overlay>
        </View>;
    }
}

export default App;

visible： 属性是用来控制是否显示的。
style： 当然就是样式，适用于 View component 的样式都可以使用。
onShow： 当 Overlay 显示后被触发的 function 。
onClose： 当 Overlay 关闭后被触发的 function 。

表现如下：

使用方法二：用 JS 代码创建

import React from 'react';
import { View, Button, Overlay } from 'react-native';

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    onBtnShowClick = () => {
        let overlay = Overlay.show({
            style: {
                justifyContent: 'center'
            },
            children: <View style={{ paddingVertical:80, backgroundColor:'#fff' }}>
                <Button title="关闭" onPress={() => overlay.close()}/>
            </View>,
            onShow: function() {
                console.log('Overlay 显示了');
            },
            onClose: function() {
                console.log('Overlay 关闭了');
            }
        });
    }


    render() {
        return <View style={{paddingTop: 200}}>
            <Button title="点我" onPress={this.onBtnShowClick}/>
        </View>;
    }
}

export default App;

Overlay.show(options) 可显示一个 Overlay，其所接受的参数中，children 是包含在浮层内的内容。其它参数与上个示例中一样。

更详细的说明请参见文档：https://www.npmjs.com/package/rn-overlay 。