React Native嵌套打开Small Bottom Sheet异常问题咨询

这类叠层场景运行异常基本逃不开三个根因：z-index层级混乱、手势响应冒泡冲突、组件挂载位置错误，按以下规则实现即可稳定运行：

• 组件挂载平级化：禁止把1/4高度的小BottomSheet作为3/4高度大BottomSheet的子节点挂载，两个BottomSheet必须全部作为页面根容器的直接子元素，保持平级关系。显式指定两个组件及其遮罩层的层级：大BottomSheet设置zIndex: 10，小BottomSheet设置zIndex: 20，小BottomSheet的遮罩层透明度调整到0.2-0.3，不要做完全不透明的遮罩挡住下层内容。
• 手势响应隔离：如果使用@gorhom/bottom-sheet（RN生态主流BottomSheet实现），给上层小BottomSheet开启gestureEventsShouldHandleSimultaneously: true，同时拿独立状态控制大BottomSheet的enabled属性：小BottomSheet打开时临时禁用大BottomSheet的手势响应，关闭后再恢复，避免上下滑动手势被两个组件同时捕获，出现卡顿、意外拖拽关闭的问题。
• 高度与定位固定：不要直接传百分比字符串作为BottomSheet高度，提前通过Dimensions.get('window').height获取视口总高度，计算出固定数值传入snapPoints：大BottomSheet的snapPoints配置为[0, SCREEN_HEIGHT * 0.75]，小BottomSheet的snapPoints配置为[0, SCREEN_HEIGHT * 0.25]。两个组件的动画容器统一设置position: 'absolute'，定位锚点绑定页面根容器，不要绑定带偏移样式的父级元素，避免位置计算错位。
• 状态逻辑解耦：不要用同一个开关状态控制两个BottomSheet，单独声明isMainSheetOpen、isSmallSheetOpen两个状态变量，打开小BottomSheet时只修改小Sheet对应的状态，不要触发大BottomSheet的重渲染或状态变更，两个组件的开闭逻辑完全独立。

最小可运行实现参考（基于@gorhom/bottom-sheet）：

import { View, Dimensions } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
import { useState, useRef } from 'react';

const SCREEN_HEIGHT = Dimensions.get('window').height;
const MAIN_SHEET_HEIGHT = SCREEN_HEIGHT * 0.75;
const SMALL_SHEET_HEIGHT = SCREEN_HEIGHT * 0.25;

export default function NestedSheetPage() {
  const [isSmallSheetOpen, setIsSmallSheetOpen] = useState(false);
  const mainSheetRef = useRef(null);
  const smallSheetRef = useRef(null);

  const openSmallSheet = () => {
    setIsSmallSheetOpen(true);
    smallSheetRef.current?.snapToIndex(1);
  };

  const closeSmallSheet = () => {
    setIsSmallSheetOpen(false);
    smallSheetRef.current?.close();
  };

  return (
    <View style={{ flex: 1 }}>
      {/* 页面常规内容 */}
      
      {/* 3/4高度主BottomSheet，与小Sheet平级挂载在根容器下 */}
      <BottomSheet
        ref={mainSheetRef}
        index={1}
        snapPoints={[0, MAIN_SHEET_HEIGHT]}
        zIndex={10}
        enabled={!isSmallSheetOpen}
      >
        {/* 主Sheet内容，内部按钮触发openSmallSheet即可唤起上层小Sheet */}
      </BottomSheet>

      {/* 1/4高度小BottomSheet，层级高于主Sheet */}
      <BottomSheet
        ref={smallSheetRef}
        index={-1}
        snapPoints={[0, SMALL_SHEET_HEIGHT]}
        zIndex={20}
        enablePanDownToClose
        gestureEventsShouldHandleSimultaneously
        onClose={closeSmallSheet}
        backgroundStyle={{ opacity: 0.95 }}
      >
        {/* 小Sheet内容 */}
      </BottomSheet>
    </View>
  );
}

关键避坑：不要用Modal组件包裹上层小BottomSheet，RN安卓端Modal会挂载到独立原生视图层，直接覆盖所有RN侧普通视图，会导致下层大BottomSheet被完全遮挡、无法交互。

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