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
        }