React Native中如何让BottomSheet显示在屏幕最上层？

核心问题分析 #

你的代码中BottomSheetModalProvider嵌套在Screen内部的子视图中，导致BottomSheet的渲染层级低于页面其他内容，进而出现被覆盖、无法触摸交互的情况。同时存在无效的Fragment嵌套，可能间接干扰布局层级。

具体修复步骤 #

1. 调整BottomSheetModalProvider的层级 #

将BottomSheetModalProvider移至最外层，包裹整个Screen组件，确保BottomSheet能在全局最高层级渲染：

return (
  <BottomSheetModalProvider>
    <Screen preset="fixed" style={{ backgroundColor: colors.background, flex: 1, padding: 10 }}>
      <View style={{ flex: 1 }}>
        <Searchbar
          placeholder="조회조건을 입력해주세요"
          onChangeText={onChangeSearch}
          value={searchQuery}
          onPressIn={() => handlePresentModalPress('touch on')}
        />
        <BottomSheetModal
          backgroundStyle={{ backgroundColor: "gray" }}
          style={styles.bottomSheet}
          ref={bottomSheetModalRef}
          index={1}
          snapPoints={snapPoints}
          onChange={handleSheetChanges}
        >
          <View style={{ marginTop: 10, marginLeft: 50, marginRight: 50, flexDirection: "row" }}>
            <View style={{ flex: 1 }}>
              <Button 
                mode="outlined"
              >소속을 입력하세요
              </Button>
            </View>
          </View>
        </BottomSheetModal>
      </View>
    </Screen>
  </BottomSheetModalProvider>
)

2. 强制设置BottomSheet的zIndex #

在样式中给BottomSheet添加足够大的zIndex，确保它处于所有视图之上：

const styles = StyleSheet.create({
  bottomSheet: {
    zIndex: 9999,
  },
  detailButton: {
    // 保留原有样式
  }
})

3. 修复无效的Fragment嵌套 #

renderItem中存在标签不匹配的无效Fragment，清理后避免布局混乱：

const renderItem = ({ item, index }) => (
  <TouchableOpacity
    key={index + item.inspNo + item.spvsNo}
    onPress={throttle(() => {
      onClickItem(item.inspNo, item.spvsNo);
    })}
  >
    <View>
      <Button 
        icon="magnify-expand"
        mode="elevated"
        style={styles.detailButton}
        onPress={throttle(() => {
          onClickItem(item.inspNo, item.spvsNo);
        })}
      >
      </Button> 
    </View>
  </TouchableOpacity>
);

4. 优化Backdrop交互（可选） #

如果需要点击遮罩关闭BottomSheet，添加自定义Backdrop并禁用点击穿透：

const renderBackdrop = useCallback((props) => (
  <BottomSheetBackdrop
    {...props}
    disappearsOnIndex={-1}
    appearsOnIndex={0}
    enableTouchThrough={false}
  />
), []);

// 在BottomSheetModal中添加该属性
<BottomSheetModal
  // 其他属性...
  backdropComponent={renderBackdrop}
>

验证修复 #

完成修改后重新运行项目，确认：

• BottomSheet能正常显示在所有内容之上
• 内部按钮可正常响应触摸
• 滑动关闭、遮罩点击关闭等交互正常

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