React Native z-index异常：自定义下拉设absolute高z-index仍被遮挡如何解决

从效果异常截图可以看到，下拉列表弹出后被页面下方的输入框、功能按钮直接遮挡，完全不符合预期。出现这类问题的本质是React Native 的视图层叠规则和Web DOM逻辑存在本质差异，无法直接照搬Web开发的经验：

• Web环境中设置position: absolute的元素会脱离文档流，依靠全局z-index完成层级排序，不受父级文档流顺序限制
• React Native 原生视图的z-index仅在同一父组件的直接子节点排序范围内生效。如果当前Select组件的整体渲染顺序在其他兄弟组件之前，哪怕内部弹出层的z-index设置到999999的极高值，也会被后续渲染的兄弟组件直接遮挡，不会像Web那样自动浮到视觉最上层。

• 方案1（最稳妥）：用独立渲染容器承载弹出层
  不要把下拉弹出层嵌在Select组件的内部视图树里，直接使用React Native提供的Modal组件承载Options内容。Modal是独立于当前页面视图树的原生渲染窗口，天然不受父级、兄弟组件的层叠顺序影响，从根源上避免被遮挡的问题。
• 方案2：调整层叠逻辑适配RN规则
  如果不想引入Modal组件，需要针对性修改现有代码：
  1. 不要只给内部的Options组件设置高z-index，要给最外层的Container容器本身设置足够高的z-index，保证整个Select组件的渲染层级高于页面上其他后续渲染的兄弟组件
  2. 移除给Options设置的transform: translateY(26px)偏移，这类带transform的元素会创建独立的原生渲染层，容易触发不可预期的排序偏差，直接通过调整top属性实现位置偏移即可
• 方案3：排查父容器裁剪限制
  顺着组件树向上检查所有包裹当前Select的父容器，确认没有设置overflow: hidden属性——很多时候视觉上的“被遮挡”其实是父容器把超出范围的下拉列表直接裁剪掉了，和z-index本身无关。

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