如何在重叠View中完全隐藏穿透背景的文本与图表内容

开发过程中出现下层文本、图表内容穿透上层视图背景色透出的问题，重叠区域内容无法被上层视图完全遮挡，效果参考：

问题复现代码：

<View style={{}}>
  <View style={{ backgroundColor: 'green', width: 300, height: 200, position: 'absolute' }}>
    <Text>{'Its not overlapping'}</Text>
  </View>
  <Text>{'Text shines through'}</Text>
</View>

该问题常见于React Native安卓端，核心原因是绝对定位视图未配置正确层级参数：安卓原生渲染依赖elevation属性判定层级，仅设置position: 'absolute'不会自动将视图抬升到更高渲染层，就会出现下层内容穿透的现象。
按以下配置即可实现完全遮挡：

• 给上层需要实现遮挡效果的绝对定位视图添加zIndex: 1，确保层级高于同层其他默认zIndex为0的组件
• 安卓端必须额外添加elevation: 1，适配安卓原生渲染层级规则，仅配置zIndex在多数安卓机型上不生效
• 如果是WebView、自渲染图表这类特殊组件仍有穿透问题，给上层遮挡视图追加overflow: 'hidden'属性即可

修改后可正常运行的代码：

<View style={{}}>
  <View style={{ 
    backgroundColor: 'green', 
    width: 300, 
    height: 200, 
    position: 'absolute',
    zIndex: 1,
    elevation: 1
  }}>
    <Text>{'Its not overlapping'}</Text>
  </View>
  <Text>{'Text shines through'}</Text>
</View>

内容的提问来源于stack exchange，提问作者knusperkecks200