react-native布局中的层级问题（zIndex，elevation）

小咪咪 2021-11-09 13:56 396阅读 0赞

目录

*  关于层级的zIndex/elevation
    
     *  1、zIndex是rn在0.30开始支持的属性，是可以生效的；
     *  2、shadow和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”）

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">情况</th> 
   <th style="text-align:center;">在z轴的层叠关系</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">既没有ZIndex属性，又没有elevation 属性</td> 
   <td style="text-align:center;">由其摆放位置决定的，放在下面的组件会在上层</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">两个组件只有zIndex没有elevation属性时</td> 
   <td style="text-align:center;">zIndex大的在上层</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">两个组件有elevation属性</td> 
   <td style="text-align:center;">elevation大的在上层</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">两个组件既有zIndex属性elevation属性</td> 
   <td style="text-align:center;">以elevation为准</td> 
  </tr> 
 </tbody> 
</table>

注：对于IOS，同层级的组件，z轴的层叠关系只与摆放顺序与zIndex有关，与elevation无关

转载于:https://www.cnblogs.com/qiqi715/p/9623338.html

发表评论取消回复

表情：

评论列表（有 0 条评论，396人围观）

还没有评论，来说两句吧...

相关阅读

相关 css布局中的BFC问题

css布局中的BFC问题 1. 面试题—双边距（边距重叠）什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？边距重叠：两个b

一时失言乱红尘/ 2022年12月25日 12:51/ 0 赞/ 67 阅读

相关 QT中改变组件的层级

设置控件置于父窗口的顶部：widget->raise(); 设置控件层次：widget->stackUnder(other\_widget); QLabe

野性酷女/ 2022年12月25日 01:48/ 0 赞/ 60 阅读

相关 css布局中的BFC问题

1. 面试题—双边距（边距重叠） 1. 什么是边距重叠？ 2. 什么情况下会发生边距重叠？ 3. 如何解决边距重叠？边距重叠：两个box如果都设置了边距，那么

╰+攻爆jí腚メ/ 2022年12月16日 09:08/ 0 赞/ 109 阅读

相关关于设置z-index层级无效的问题

最近在写一个小项目，遇到很多小细节的问题，果然还是要实战才能知道自己的不足之处啊~回归正题，我在一个div明明设置了属性z-index，但是为什么在网页上显示无效呢？首先排除设

矫情吗；*/ 2022年06月17日 01:48/ 0 赞/ 226 阅读

相关 ReactNative

[React Native可伸缩列表封装与快速实现方案][React Native] React Native快速封装一个类似qq好友列表的可伸缩列表，一点经验分享

朴灿烈づ我的快乐病毒、/ 2022年06月04日 07:35/ 0 赞/ 364 阅读

相关 reactNative 中的样式

reactNative 样式 > 在 React Native 中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件

川长思鸟来/ 2022年03月21日 07:08/ 0 赞/ 266 阅读

相关 HTML中的层级

HTML中的层级总结：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。定位高于浮动，浮动高于标准流。（高低和占不占位置无关）用法： 1. 必须有定位。（

水深无声/ 2022年03月06日 18:42/ 0 赞/ 241 阅读

相关 ReactNative中React Navigation使用

React Navigation 简介 React Navigation提供了一种在屏幕之间切换并管理导航历史记录的方式。如果您的应用程序只使用一个 stack

阳光穿透心脏的1/2处/ 2022年01月19日 00:57/ 0 赞/ 253 阅读

相关标签层级问题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1

淩亂°似流年/ 2021年12月11日 11:13/ 0 赞/ 193 阅读

相关 react-native布局中的层级问题（zIndex，elevation）

目录关于层级的zIndex/elevation 1、zIndex是rn在0.30开始支持的属性，是可以生效的； 2、shadow

小咪咪/ 2021年11月09日 13:56/ 0 赞/ 397 阅读