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

流星雨在线

于 2021-01-06 11:42:55 发布

阅读量1.3k

点赞数

分类专栏： # React Native

本文链接：https://blog.csdn.net/liuxingyuzaixian/article/details/112261064

版权

React Native 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个React-Native应用中遇到的手势按住按钮切换场景时的兼容性问题，特别是在华为Mate20手机上的表现。文章回顾了React-Native在不同平台上关于z轴层叠关系的处理方式，并提出了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题

我这边用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
        }