React Native Mapbox GL zIndex显示异常，如何让指定元素始终置顶

问题根本原因 #

react-native-mapbox-gl 中的 PointAnnotation 是基于 Mapbox 原生 GL 图层渲染的，RN 样式中的 zIndex 仅管控 RN 同层级视图的堆叠逻辑，对原生层渲染的标注元素不生效。默认情况下标注的层级由 JSX 中的渲染顺序决定，先渲染的标注层级更低，后渲染的层级更高，你遇到的后渲染元素在底层的问题，通常是条件渲染触发的渲染顺序异常导致的。

可行解决方案 #

• 方案1：调整渲染顺序+使用组件原生zIndex属性
  将需要置顶的元素放在所有地图子元素的最后面渲染，同时注意库的 PointAnnotation 支持直接传 zIndex 作为组件属性，不需要写在 style 内，修改后的示例代码如下：

<MapboxGL.MapView
  style={{flex: 1}}
  styleURL={'mapbox://styles/gigajungkyu/ckt962t3a19zh17pfq1sr7z3f'}
  pitchEnabled={false}
  rotateEnabled={false}>
  {/* 先渲染普通层级的标注 */}
  <MapboxGL.PointAnnotation
    id={'1'}
    key={'1'}
    zIndex={1}
    coordinate={[-122.849, 49.1]}>
    <TouchableOpacity
      onPress={() => setDisplay((prevState) => !prevState)}>
      <View style={{width: 100, height: 100, backgroundColor: 'red'}}></View>
    </TouchableOpacity>
    <MapboxGL.Callout title={'You'} />
  </MapboxGL.PointAnnotation>
  {/* 最后渲染需要置顶的元素，不管是否条件渲染，放在最后天然层级更高 */}
  {display && (
    <MapboxGL.PointAnnotation
      id={'2'}
      key={'2'}
      zIndex={999}
      coordinate={[-103.349, 49.1]}>
      <TouchableOpacity>
        <View
          style={{
            width: 100,
            height: 100,
            backgroundColor: 'blue',
          }}></View>
      </TouchableOpacity>
      <MapboxGL.Callout title={'You'} />
    </MapboxGL.PointAnnotation>
  )}
</MapboxGL.MapView>

• 方案2：用RN Modal封装自定义Callout，保证绝对顶层
  如果需要Callout在任何场景下都不被遮挡，可以不用库自带的Callout组件，自己实现自定义Callout：点击标注时计算出标注在屏幕的坐标，将自定义Callout内容放在RN的Modal组件中绝对定位展示，Modal的原生层级高于所有地图元素，不会被任何地图图层挡住。

• 方案3：使用SymbolLayer代替PointAnnotation做层级管控
  如果需要大量标注、频繁调整层级的场景，推荐用SymbolLayer+ShapeSource的组合实现标注，你可以自由调整图层的渲染顺序，需要置顶的图层放在所有图层的最后声明即可，还可以通过sortKey属性精确控制同图层内元素的层级，灵活度远高于PointAnnotation。

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