React Native Android中Absolute与zIndex层级异常问题排查

问题场景 #

场景1：absolute组件不可见 #

<View style={{ flex: 1, width: '100%' }}>
  <View
    style={{
      position: 'absolute',
      top: 0,
      right: 0,
      width: 70,
      height: 70,
      backgroundColor: '#FF0000',
      zIndex: 20,
      elevation: 20,
    }}
  />
  <View style={{ width: '100%', height: '100%', backgroundColor: '#C6C6C6' }} />
</View>

此场景下，设置了zIndex和elevation的红色absolute组件被灰色View覆盖，无法可见。

场景2：absolute组件正常显示 #

<View style={{ flex: 1, width: '100%' }}>
  <View style={{ width: '100%', height: '100%', backgroundColor: '#C6C6C6' }} />
  <View
    style={{
      position: 'absolute',
      top: 0,
      right: 0,
      width: 70,
      height: 70,
      backgroundColor: '#FF0000',
      zIndex: 20,
      elevation: 20,
    }}
  />
</View>

此场景下，红色absolute组件正常显示在灰色View上方。

原因分析 #

• 同级组件的渲染顺序决定默认层级：React Native中，同级组件的显示层级默认由代码书写顺序决定——后出现的组件会渲染在先出现的组件上方，这个规则不受position: absolute属性影响。
• zIndex的生效限制：zIndex仅能在定位方式一致的同级组件间调整层级（比如都为absolute，或都为默认的relative/flex流内元素）。如果混合了定位方式（一个是脱离flex流的absolute，另一个是flex流内的非绝对定位元素），zIndex无法覆盖渲染顺序带来的层级优先级。
• elevation的作用范围：elevation是Android平台独有的属性，主要用于控制阴影高度，它对层级的影响仅作用于Android原生视图层级，但依然无法突破React Native的同级渲染顺序规则——后渲染的flex流内元素依然会覆盖先渲染的absolute元素。

场景1中，灰色View是flex流内的非绝对定位元素，代码写在红色absolute View之后，默认层级更高，直接覆盖了红色View；而zIndex和elevation因定位方式混合的限制，无法改变这一层级关系。场景2中红色View写在灰色View之后，自然渲染在上方，所以正常显示。

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