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

最近在做react native相关的项目，有遇到关于ios和android方面的样式兼容问题，遂想自己遇到的难点bug记录下来

关于层级的zIndex/elevation

1.zIndex是rn在0.30开始支持的属性，是可以生效的；

2.shadow和elevation

shadow（阴影）开头的样式现在可以在iOS上应用，但在安卓中是不生效的.
而Android上对应的属性是elevationelevation。
设置elevation属性就等价于使用原生的elevation API，因而也有同样的限制（比如最明显的就是需要Android 5.0以上版本）。此外还会影响到层叠

对于Android，两个同一层级的定位组件（position：“absolute”）

情况	在z轴的层叠关系
既没有ZIndex属性，又没有elevation 属性	由其摆放位置决定的，放在下面的组件会在上层
两个组件只有zIndex没有elevation属性时	zIndex大的在上层
两个组件有elevation属性	elevation大的在上层
两个组件既有zIndex属性elevation属性	以elevation为准

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

eg:<View style = {styles.tooBar}></View>

设置阴影：

ios:

.tooBar{

shadowOffset: { width: 0, height: 3 },

shadowColor: 'black',

shadowOpacity: 1,

shadowRadius: 3,

}

android:

.tooBar{

elevation: 10

}

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

React Native布局详细指南
本文出自<React Native学习笔记>系列文章. 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Nati ...
React Native应用中的样式
React Native应用中的样式 RN中样式与CSS名称类似,但是本质上不同 -- RN应用中没有浏览器内核!!! 例如:RN中的组件不分"行内"."行内块" ...
React Native工程中TSLint静态检查工具的探索之路
背景建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查 ...
如何高效管理 React Native 项目中的图片资源
本文为 Marno 原创,转载必须保留出处! 公众号[ Marno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 前言刚开始写 ...
从web移动端布局到react native布局
在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...
React Native布局
一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提 ...
android listview 滚动条隐藏,隐藏滚动条在FlatList（React Native）中Android
我想在我的应用程序中使用FlatList(React-native).我正在水平使用它并可以看到滚动条.在ScrollView中有一个选项来隐藏滚动条,但不在FlatList中.有没有人能够以其他方式 ...
大道至简——React Native在直播应用中的实践
声明:本文来自「七牛云主办的架构师实践日--亿级移动应用架构最佳实践」的演讲内容整理.PPT.速记和现场演讲视频等参见"七牛架构师实践日"官网. 嘉宾:卜赫,七牛云布道师. 责编: ...
在 React Native 中实现 3D 动画
本文的范围将涵盖对 Three.js 库和 Animated API 的探索. 您应该具备 JavaScript 和 React Native 的基本知识才能继续学习: 要了解更多关于可以在 Reac ...

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

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

最新文章

热门文章