react-native记录zIndex控制页面层次出现透过去的现象

一、问题

我这边用react-native为了实现手势按住一个按钮之后切换场景，使用了zIndex进行页面层次的控制，在所有的ios手机上与绝大部分安卓手机上都表现正常。实际正常效果如下：

但是在HUAWEI mate 20手机上出现了第二画没有遮盖住第一画的情况，并且这种情况是少量安卓手机按照特定操作步骤才会复现，如下：

二、回顾react-native在z轴的层叠关系

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

三、解决办法

实际上在控制zIndex的时候，最好用elevation辅助控制可以解决这种手机兼容性问题

const container = {...styles.container,zIndex: showVoiceListening ? 10 : 1,elevation: showVoiceListening ? 10 : 1}

react-native记录zIndex控制页面层次出现透过去的现象相关推荐

React Native 内嵌h5页面(基于vue)的实现方案调研
React Native 是目前流行的跨平台移动应用开发框架之一.通过采用不同的方法进行混合移动应用开发,它不会生成原生 UI 组件,而是基于 React,React Native 是一个用于构建基于 ...
React Native android zIndex无效的解决办法
开发APP的时候,用的要ios模拟器调试,开发完以后,发现在android上显示存在异常.原来zIndex在android上好像没有生效. 解决办法: 使用elevation在安卓下可以生效. ele ...
React Native之react-navigation动态修改标题、页面导航等
目录 1.navigation导航对象相关参数 1.1在当前Component获取navigation导航对象 1.2navigate方法 1.2.2使用示例 1.2.3源码 1.3params 1. ...
React Native之原理浅析
一.JavaScriptCore 讲React Native之前,了解JavaScriptCore会有帮助,也是必要的.React Native的核心驱动力就来自于JS Engine. 你写的所有JS ...
react native 开发笔记（二）
1.按照前文配置好文件之后,便可以生成目录 (1)按照小兄弟的步骤生成项目:react-native init name (2)目录结构 index.ios.js和index.android.js为入 ...
iOS新知识学习之React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
React Native 启动速度优化——Native 篇（内含源码分析）
Web 开发有一个经典问题:「浏览器中从输入 URL 到页面渲染的这个过程中都发生了什么?」据我考据这个问题起码有十年历史了.在日新月异学不动的前端圈子里,这个问题能一直被问,就是因为因为它是个非常 ...
react native与webview通信跳转页面报错：Cannot read property 'setNativeProps' of undefiend
这个错误是我这边用react native和webview通信的时候,因为要从webview跳回到react native的页面,所以就从webview传过来一个路由字符串.本来以为可以通过navig ...
react native利用webvView嵌入h5页面以及RN与webView的通信
前言:这边主要是记录下,在react native中如何使用h5页面,以及h5页面发生点击,或者跳转到react native时,如何与react native进行通信. 一.react native ...

react-native记录zIndex控制页面层次出现透过去的现象

一、问题

二、回顾react-native在z轴的层叠关系

三、解决办法

react-native记录zIndex控制页面层次出现透过去的现象相关推荐

最新文章

热门文章