rn用Modal实现Drawer
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的更多相关文章
- Taro自定义Modal对话框组件|taro仿微信、android弹窗
基于Taro多端实践TaroPop:自定义模态框|dialog对话框|msg消息框|Toast提示 taro自定义弹出框支持编译到多端H5/小程序/ReactNative,还可以自定义弹窗类型/弹窗样 ...
- vue3.0使用ant-design-vue进行按需加载原来这么简单
下载 ui库 yarn add ant-design-vue 默认是全局引入,打包后体积很大, 非常影响首屏加载速度, 按需加载 下载按需加载的插件;推荐使用cnpm cnpm install bab ...
- AntdVue使用
AntdVue使用 配置与安装 #安装 npm install ant-design-vue --save #按需加载 import { Button, Layout, Row, Col, Menu, ...
- 我的 React 最佳实践
There are a thousand Hamlets in a thousand people's eyes. ----- 威廉·莎士比亚 免责声明:以下充满个人观点,辩证学习 React 目前开 ...
- 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 ...
- drawer 抽屉 弹框 在 modal的后面的解决方案
drawer 抽屉 弹框 在 modal的后面的解决方案 方案1 在框内 弹出 <Drawer title="拍照" :transfer="false" ...
- react-native自定义Modal模态框|仿ios、微信弹窗RN版
前序 纵观每个优质项目,无论web端还是native原生应用开发,弹窗都是不可忽视的一环,能很大程度上直接决定用户体验.如:微信.支付宝.ios都有很成熟的一套弹窗UI展示场景. 最近一直沉迷在rea ...
- [RN] React Native 使用 teaset(Drawer)实现侧边菜单
https://www.cnblogs.com/crazycode2/p/9537518.html
- RN组件备忘录
1:ActivityIndicator:圆形的loading提示符号. 2:Button:按钮 3:FlatList:高性能列表组件,支持下拉刷新. 4:Image:图片组件,能显示 网络图片.静态资 ...
- [RN] React Native 使用 阿里 ant-design
React Native 使用 阿里 ant-design 实例效果如图: 一.安装 npm install antd-mobile-rn --save npm install babel-plugi ...
随机推荐
- 发送http2请求
有时服务器会检测http协议版本,有http/1.1和h2,requests发送的是http1.1的请求 # pip install httpx client = httpx.Client(http2 ...
- k3s安装kubernetes环境
官方文档:https://docs.rancher.cn/k3s/ 官方文档:https://rancher.com/docs/k3s/latest/en/installation/install-o ...
- Cesium for Unreal加载倾斜摄影
本文介绍UE4中通过Cesium插架加载本地倾斜摄影模型.Cesium for Unreal插件运行在UE环境何总运行Cesium,这样方便做一个GIS应用. 安装Cesium for Unreal插 ...
- 数位排序【第十三届蓝桥杯省赛C++C组】
数位排序 小蓝对一个数的数位之和很感兴趣,今天他要按照数位之和给数排序. 当两个数各个数位之和不同时,将数位和较小的排在前面,当数位之和相等时,将数值小的排在前面. 例如,\(2022\) 排在 \( ...
- Debian 软件包管理
Debian 软件包管理 Debian 软件包管理 基础软件包管理知识 sources.list 文件格式 新手建议 档案库临时小故障 软件包依赖关系 APT 进行软件包管理 基本操作 软件包管理操作 ...
- 在elasticsearch中简单的使用script_fields
目录 1.背景 2.准备数据 2.1 mapping 2.2 插入数据 3.案例 3.1 格式化性别 1-男 2-女 -1-未知 如果不存在sex字段,则显示-- 其余的显示 ** 3.1.1 dsl ...
- Dubbo 入门系列之快速部署一个微服务应用
本文将基于 Dubbo Samples 示例演示如何快速搭建并部署一个微服务应用. 背景 Dubbo 作为一款微服务框架,最重要的是向用户提供跨进程的 RPC 远程调用能力.如上图所示,Dubbo 的 ...
- java入门与进阶P-2.3
判断 if语句 一个基本的if语句由一个关键字if开头,跟上在括号里的表示条件的逻辑表达式, 然后是一对大括号"{}"之间的若干条语句.如果表示条件的逻辑表达式的结果为true,那 ...
- 字符输入流读取字符数据-writer类
字符输入流读取字符数据 读取字符:read方法,每次可以读取一个字符的数据,提升为int类型,读取到文件末尾,返回-1,循环读取,代码使用演示∶ writer类 java.io.Filelwriter ...
- Unity之语音识别
Unity之语音识别 前言 开篇 Unity版本及使用插件 正题 写脚本 挂载到游戏场景中 结尾 唠家常 今日无推荐 前言 开篇 今儿心情好,哈哈哈哈哈 今天小黑给大家带来Unity的语音识别功能,超 ...