React Native使用zIndex排序视图失效，无法将滑块按钮置于地图上层

问题原因 #

你遇到的zIndex不生效问题是React Native开发中的常见场景，核心有两点原因：

• React Native中的zIndex仅对设置了定位属性（position: absolute/position: relative）的元素生效，你当前只给Slider加了zIndex，没有设置定位，属性不会生效
• React Native Maps属于原生渲染组件，层级优先级高于普通JSX视图，仅给Slider加zIndex不足以覆盖原生组件的层级

修复方案 #

你可以按照以下步骤调整代码即可实现Slider悬浮在地图上层的效果：

1. 给Slider组件补充绝对定位属性，同时指定固定位置（可以根据你的设计需求调整数值），适当调高zIndex值避免被其他元素遮挡
2. 不需要调整现有渲染顺序，修改后的SliderRender部分代码如下：

const SliderRender = (
  <Slider
    renderMap={this.goToMap.bind(this)}
    renderList={this.goToList.bind(this)}
    key="slider"
    style={{
      zIndex: 999,
      position: 'absolute',
      top: 30, // 距离顶部的高度，可按需调整
      left: 20,
      right: 20,
      height: 40 // 对应Slider的高度，可按需调整
    }}
  />
);

如果是Android设备测试仍不生效，可以额外给包裹MapHome和Slider的父容器加上zIndex: 1属性即可：

<View style={{backgroundColor: '#d1cfcf' ,flex: 1, zIndex: 1}}>
  <MapHome
    renderMap={this.goToMap.bind(this)}
    renderList={this.goToList.bind(this)}
  />
  {SliderRender}
</View>

补充说明 #

React Native的层级规则和Web端不完全一致，默认优先遵循渲染顺序（后渲染的元素层级更高），定位元素的zIndex会覆盖渲染顺序规则，涉及原生组件时最好同时设置定位和zIndex保证层级符合预期。

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