该博文已与新版不兼容,新版文档请参考这里:
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'