react-native布局中的层级问题(zIndex,elevation)
关于层级的zIndex/elevation
1、zIndex是rn在0.30开始支持的属性,是可以生效的;
2、shadow和elevation
shadow
(阴影)开头的样式现在可以在iOS上应用,但在安卓中是不生效的.- 而Android上对应的属性是
elevationelevation
。
设置elevation属性就等价于使用原生的elevation API,因而也有同样的限制(比如最明显的就是需要Android 5.0以上版本)。此外还会影响到层叠视图在空间z轴上的顺序
。
结论
对于Android,两个同一层级的定位组件(position:“absolute”)
情况 | 在z轴的层叠关系 |
---|---|
既没有ZIndex属性,又没有elevation 属性 | 由其摆放位置决定的,放在下面的组件会在上层 |
两个组件只有zIndex没有elevation属性时 | zIndex大的在上层 |
两个组件有elevation属性 | elevation大的在上层 |
两个组件既有zIndex属性elevation属性 | 以elevation为准 |
注:对于IOS,同层级的组件,z轴的层叠关系只与摆放顺序与zIndex有关,与elevation无关
react-native布局中的层级问题(zIndex,elevation)的更多相关文章
- React Native工程中TSLint静态检查工具的探索之路
建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...
- React Native开发中自动打包脚本
React Native开发中自动打包脚本 在日常的RN开发中,我们避免不了需要将我们编写的代码编译成安装包,然后生成二维码,供需要测试的人员扫描下载.但是对于非原生的开发人员来说,可能不知如何使用X ...
- 从web移动端布局到react native布局
在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...
- react native 布局注意点
一.react native中很多是ES6语法. 1行.表示是js的严格模式. 'use strict';严格模式中变量必须先声明,然后赋值.定义等:还有就是this的绑定. 2行到8行.导入依赖,可 ...
- React native开发中常见的错误
react native环境搭建请移步:react native环境搭建 这里说说react native创建完成之后,运行中出现的常见问题, 问题1: java.lang.RuntimeExcept ...
- React Native布局
一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提供 ...
- 用CodePush在React Native App中做热更新
最近在学React Native,学到了CodePush热更新. 老师讲了两种实现的方法,现将其记录一下. 相比较原生开发,使用React Native开发App不仅能节约开发成本,还能做原生开发不能 ...
- React Native布局实践:开发京东client首页(三)——轮播图的实现
上篇文章中,我们一起构建了京东client的TabBar.在本文中.将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧! 1.相关控件调研 眼下在Gith ...
- React Native布局详解
Flexbox 布局 Flex有两个属性:Container 和 Item flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.采用fle ...
随机推荐
- css3 mask遮罩动画(照明灯效果)
<pre><!DOCTYPE html><html lang="en"><head><meta charset="U ...
- Md5实例
MD5实例 我的md5源码 当我们对数据进行操作时,存储到数据库时,有时候不希望别人能够看到,通过md5能够实现对数据的加密. java代码 ```javaimport org.springframe ...
- Spring Boot2 系列教程(二十三)理解 Spring Data Jpa
有很多读者留言希望松哥能好好聊聊 Spring Data Jpa! 其实这个话题松哥以前零零散散的介绍过,在我的书里也有介绍过,但是在公众号中还没和大伙聊过,因此本文就和大家来仔细聊聊 Spring ...
- 创建基于OData的Web API - Knowledge Builder API, Part II:Project Setup
本篇为Part II:Project Setup 查看第一篇<Part I: Business Scenario> 第一步,准备步骤. 准备步骤一,下载.NET Core 2.2 SDK ...
- gitbook的插件配置
原生的gitbook样式比较单一,美观度和功能欠佳,可通过相关插件进行拓展. 插件地址:https://plugins.gitbook.com/ 主目录下新建book.json: { "au ...
- MySQL/MariaDB读写分离配置
DB读写分离描述 数据库的读写分离其实就是为了加减少数据库的压力:数据库的写入操作由主数据库来进行,读取操作由从数据库来进行操作.实现数据库读写分离技术是有很多方法的,在这里我就用一个比较简单的mys ...
- django_5:表单1
CSRF( Cross Site Request Forgery)跨站点请求欺骗 方法一. {% csrf_token %} 方法二.在setting.py中注释掉MIDDLEWARE中的'djang ...
- ThreadLocal原理分析与代码验证
ThreadLocal提供了线程安全的数据存储和访问方式,利用不带key的get和set方法,居然能做到线程之间隔离,非常神奇. 比如 ThreadLocal<String> thread ...
- 来理解undefined 和 null 区别
之前虽然也知道这两个之间的区别,但是让我描述的话,感觉上还是说的不是很清楚.今天也详细看了一次这个知识点,现在来说说这两者间的区别. null: Null类型,代表“空值”,代表一个空对象指针,使用t ...
- 转。http,状态码详解
转自konglingbinHTTP状态码详解:https://www.cnblogs.com/klb561/p/9205867.html HTTP状态码(HTTP Status Code)是用以表示网 ...