React Native iOS端多个Overlay层级冲突无法正常弹出问题咨询

该问题是iOS端原生视图层级渲染逻辑与Android差异导致的：你当前使用的Overlay组件默认挂载在当前父视图下，iOS对于同层级隐藏视图的zIndex计算优先级高于Android，代码排布靠后的Overlay会被排布靠前的隐藏Overlay遮挡交互/可见性。

• 方案1：显式绑定动态zIndex
  给每个Overlay的zIndex属性绑定动态值，处于显示状态的Overlay自动获得更高层级，完全不受代码排布顺序影响，改动量最小无需额外依赖，适配绝大多数单场景下同时打开最多1个Overlay的需求，改法如下：
  给第一个Overlay添加属性：

  zIndex={clientdeetsoverlay ? 1000 : 100}
  

  给第二个Overlay添加属性：

  zIndex={addressoverlay ? 1000 : 100}
  

• 方案2：使用Portal挂载到全局顶层
  引入Portal类组件将所有Overlay挂载到应用全局最顶层视图，脱离当前组件的视图层级限制，不管代码排布顺序如何，后触发显示的Overlay层级自动更高，推荐需要同时弹出多个Overlay的场景使用：

  1. 安装依赖@gorhom/portal
  2. 用Portal组件分别包裹每一个Overlay，原有Overlay的属性、内容不需要修改：

  import { Portal } from '@gorhom/portal';
  
  // 第一个Overlay
  <Portal>
    <Overlay isVisible={clientdeetsoverlay} overlayStyle={{height:'100%'}} fullScreen={true} animationType="slide">
      {/* 原有内容保持不变 */}
    </Overlay>
  </Portal>
  
  // 第二个Overlay
  <Portal>
    <Overlay animationType="slide" isVisible={addressoverlay} overlayStyle={{height:'50%',width:'90%',borderRadius:20,padding:20}} onBackdropPress={toggleOverlay}>
      {/* 原有内容保持不变 */}
    </Overlay>
  </Portal>
  

• 方案3：条件渲染仅保留显示状态的Overlay
  如果业务场景不会出现两个Overlay同时打开的情况，直接给Overlay加条件渲染即可，未激活的Overlay不会进入视图树，完全不存在层级冲突：

  {clientdeetsoverlay && (
    <Overlay isVisible={clientdeetsoverlay} {/* 原有属性、内容保持不变 */} />
  )}
  {addressoverlay && (
    <Overlay isVisible={addressoverlay} {/* 原有属性、内容保持不变 */} />
  )}
  

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