PS:本文仅说明Modal可以用来做Drawer,并不介绍Modal的用法。

今天在开发的时候,想要使用Drawer。

RN原生不自带Drawer,react-native-drawer又有bug(没法显示背景层),react-native-elements只提供了Overlay,teaset不带没有ts声明文件。

奔溃了,RN的坑有点大啊。

坑都入了,至少把手头的APP做完再弃坑吧。于是决定自己写一个Drawer组件。

思路很简单,用绝对定位,zIndex设置一个大的数。

简单代码示意如下:

<View style={styles.backdrop}>
<View style={styles.overlay}>
{ this.props.children }
</View>
</View>
const styles = StyleSheet.create({
backdrop: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 10000
}
overlay: {
position: 'absolute',
top: 0,
left: 0,
width: '80%',
height: '100%'
}
})

结果如下:

诶,奇怪,为什么我设置成top:0,但却没有覆盖顶部的tabs。

难道是我的Drawer的祖先元素中存在一个position为relative,且与tabs平级的元素?

检查了一下代码,并不是。

回想一下写web的时候是怎么实现这个功能的。

诶,我不是用position:fixed的吗!

但是一查,发现RN中position只有absolute和fixed两个取值。

怪了,那react-native-elements的Overlay是怎么实现的。

于是我就看了一下react-native-elements的Overlay的源码,发现它的根元素是RN的Modal。

然后我把RN的Modal替换掉我的Drawer的根元素再看效果,行了!

rn用Modal实现Drawer的更多相关文章

  1. Taro自定义Modal对话框组件|taro仿微信、android弹窗

    基于Taro多端实践TaroPop:自定义模态框|dialog对话框|msg消息框|Toast提示 taro自定义弹出框支持编译到多端H5/小程序/ReactNative,还可以自定义弹窗类型/弹窗样 ...

  2. vue3.0使用ant-design-vue进行按需加载原来这么简单

    下载 ui库 yarn add ant-design-vue 默认是全局引入,打包后体积很大, 非常影响首屏加载速度, 按需加载 下载按需加载的插件;推荐使用cnpm cnpm install bab ...

  3. AntdVue使用

    AntdVue使用 配置与安装 #安装 npm install ant-design-vue --save #按需加载 import { Button, Layout, Row, Col, Menu, ...

  4. 我的 React 最佳实践

    There are a thousand Hamlets in a thousand people's eyes. ----- 威廉·莎士比亚 免责声明:以下充满个人观点,辩证学习 React 目前开 ...

  5. the status bar issue of react-native Modal on Android ( RN v0.57.0)

    Problem: When use Modal in react-native, the status bar is not included if you make a full-screen ma ...

  6. drawer 抽屉 弹框 在 modal的后面的解决方案

    drawer 抽屉 弹框 在 modal的后面的解决方案 方案1 在框内 弹出 <Drawer title="拍照" :transfer="false" ...

  7. react-native自定义Modal模态框|仿ios、微信弹窗RN版

    前序 纵观每个优质项目,无论web端还是native原生应用开发,弹窗都是不可忽视的一环,能很大程度上直接决定用户体验.如:微信.支付宝.ios都有很成熟的一套弹窗UI展示场景. 最近一直沉迷在rea ...

  8. [RN] React Native 使用 teaset(Drawer)实现侧边菜单

    https://www.cnblogs.com/crazycode2/p/9537518.html

  9. RN组件备忘录

    1:ActivityIndicator:圆形的loading提示符号. 2:Button:按钮 3:FlatList:高性能列表组件,支持下拉刷新. 4:Image:图片组件,能显示 网络图片.静态资 ...

  10. [RN] React Native 使用 阿里 ant-design

    React Native 使用 阿里 ant-design 实例效果如图: 一.安装 npm install antd-mobile-rn --save npm install babel-plugi ...

随机推荐

  1. 发送http2请求

    有时服务器会检测http协议版本,有http/1.1和h2,requests发送的是http1.1的请求 # pip install httpx client = httpx.Client(http2 ...

  2. k3s安装kubernetes环境

    官方文档:https://docs.rancher.cn/k3s/ 官方文档:https://rancher.com/docs/k3s/latest/en/installation/install-o ...

  3. Cesium for Unreal加载倾斜摄影

    本文介绍UE4中通过Cesium插架加载本地倾斜摄影模型.Cesium for Unreal插件运行在UE环境何总运行Cesium,这样方便做一个GIS应用. 安装Cesium for Unreal插 ...

  4. 数位排序【第十三届蓝桥杯省赛C++C组】

    数位排序 小蓝对一个数的数位之和很感兴趣,今天他要按照数位之和给数排序. 当两个数各个数位之和不同时,将数位和较小的排在前面,当数位之和相等时,将数值小的排在前面. 例如,\(2022\) 排在 \( ...

  5. Debian 软件包管理

    Debian 软件包管理 Debian 软件包管理 基础软件包管理知识 sources.list 文件格式 新手建议 档案库临时小故障 软件包依赖关系 APT 进行软件包管理 基本操作 软件包管理操作 ...

  6. 在elasticsearch中简单的使用script_fields

    目录 1.背景 2.准备数据 2.1 mapping 2.2 插入数据 3.案例 3.1 格式化性别 1-男 2-女 -1-未知 如果不存在sex字段,则显示-- 其余的显示 ** 3.1.1 dsl ...

  7. Dubbo 入门系列之快速部署一个微服务应用

    本文将基于 Dubbo Samples 示例演示如何快速搭建并部署一个微服务应用. 背景 Dubbo 作为一款微服务框架,最重要的是向用户提供跨进程的 RPC 远程调用能力.如上图所示,Dubbo 的 ...

  8. java入门与进阶P-2.3

    判断 if语句 一个基本的if语句由一个关键字if开头,跟上在括号里的表示条件的逻辑表达式, 然后是一对大括号"{}"之间的若干条语句.如果表示条件的逻辑表达式的结果为true,那 ...

  9. 字符输入流读取字符数据-writer类

    字符输入流读取字符数据 读取字符:read方法,每次可以读取一个字符的数据,提升为int类型,读取到文件末尾,返回-1,循环读取,代码使用演示∶ writer类 java.io.Filelwriter ...

  10. Unity之语音识别

    Unity之语音识别 前言 开篇 Unity版本及使用插件 正题 写脚本 挂载到游戏场景中 结尾 唠家常 今日无推荐 前言 开篇 今儿心情好,哈哈哈哈哈 今天小黑给大家带来Unity的语音识别功能,超 ...