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. 如何让铁威马NAS可以通过互联网访问?

    当你在家或者出差去外地时候,可能要通过互联网访问你的TNAS设备,而使用远程访问功能,你可以随时随地访问你的TNAS 设备.读取你TNAS 中的文件或是对你的TNAS 设备进行配置.远程访问能给你的工 ...

  2. 前后端开发必会的 HTTP 协议“十全大补丸”(万字长文)

    本文全面介绍了 HTTP 协议相关知识,包括 HTTP 请求报文.响应报文.持久连接.缓存.Cookie 以及 HTTP 版本升级等! HTTP 协议全称为 HyperText Transfer Pr ...

  3. 5、基于EasyExcel的导入导出

    一.Apach POI处理Excel的方式: 传统Excel操作或者解析都是利用Apach POI进行操作,POI中处理Excel有以下几种方式: 1.HSSFWorkbook: HSSFWorkbo ...

  4. 2022年7月10 第四组 周鹏 CSS的基本认识

    CSS 层叠样式表 网页美观 html相当于原材料,css用来加工好看 如何嵌入? 样式如何显示html元素? 样式通常存储在样式表中 把样式表添加到html元素里 定义CSS方式 1,行内样式,可以 ...

  5. 模仿 vscode-server 把本地代码目录映射到外网

    目录 概述 分析 解决方案 准备一台VM 创建容器 SmartIDE 创建 直接使用 docker 创建 SSH 远程转发 内网穿透 ngrok frp 服务端 客户端 本文模仿 vscode-ser ...

  6. 你的 GitHub 年度报告「GitHub 热点速览 v.22.52」

    辞旧迎新的日子,又是年度报告满天飞的时候.GitHub 也不落其他平台之后,推出了用户 GitHub Contributions 报告.不知道,今年的你是不是比去年搬了更多的砖呢?在本期的 News ...

  7. [常用工具] OpenCV_contrib库在windows下编译使用指南

    本文主要讲述opencv及opencv_contrib库在windows下基于vs2017编译安装指南.所用OpenCV版本为OpenCV4.4,编译平台为vs2017. 文章目录 1 下载 2 编译 ...

  8. 火山引擎DataLeap数据调度实例的 DAG 优化方案

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 实例 DAG 介绍 DataLeap 是火山引擎自研的一站式大数据中台解决方案,集数据集成.开发.运维.治理.资产管理能力 ...

  9. [Java]内存回收机制框架图

    具体解释下面这篇博客总结的已经非常好了,我就不复制了: http://www.cnblogs.com/cielosun/p/6674431.html#12-%E5%8F%AF%E8%BE%BE%E6% ...

  10. [C#]简单的理解委托和事件

    委托 在C++中可以利用"函数指针"将对方法的引用作为实参传递给另一个方法,而C#中可以利用委托提供相同的功能. 委托-内部机制 但是委托实际上是一个特殊的类.委托必须直接或间接的 ...