React Native Bottom Sheet 在子组件中使用的问题与解决方案

问题背景

在使用 React Native Bottom Sheet 库时，开发者经常遇到一个典型问题：当 Bottom Sheet 被放置在子组件中时，它不会像预期那样出现在屏幕底部，而是出现在子组件开始的位置。这种布局问题会影响用户体验，使 Bottom Sheet 看起来像是"悬浮"在屏幕中间而非底部。

问题分析

这个问题的根源在于 React Native 的视图层级结构和 Bottom Sheet 的默认行为。当 Bottom Sheet 被嵌套在子组件中时，它的定位会受到父组件布局的限制。具体表现为：

1. 位置偏移：Bottom Sheet 出现在子组件内部而非屏幕底部
2. 层级问题：可能被其他组件遮挡
3. 样式继承：受到父组件样式的意外影响

解决方案比较

方案一：使用 Portal 技术

最初提出的解决方案是使用 Portal 技术（通过 @gorhom/portal 库）。这种方法确实能解决问题，因为它允许 Bottom Sheet 脱离正常的组件树，直接渲染到屏幕最上层。但存在明显缺点：

• 性能影响：会增加渲染负担，可能导致应用性能下降
• 复杂度增加：需要额外的库和配置

方案二：使用 BottomSheetModal

更优的解决方案是使用 BottomSheetModal 而非普通的 BottomSheet 组件。BottomSheetModal 专为这种场景设计，具有以下优势：

1. 自动处理层级：默认显示在屏幕最上层
2. 更好的动画效果：内置平滑的打开/关闭动画
3. 手势支持：内置下滑关闭手势
4. 键盘处理：内置键盘弹出时的自适应行为

最佳实践实现

以下是经过优化的 Bottom Sheet 组件实现：

import React, {forwardRef, useMemo} from 'react';
import {
  BottomSheetBackdrop,
  BottomSheetModal,
  BottomSheetView,
  useBottomSheetModal
} from '@gorhom/bottom-sheet';

const CustomBottomSheet = forwardRef(({children}, ref) => {
  const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
  
  return (
    <BottomSheetModal
      ref={ref}
      index={0}
      snapPoints={snapPoints}
      backdropComponent={(props) => (
        <BottomSheetBackdrop
          {...props}
          disappearsOnIndex={-1}
          appearsOnIndex={0}
        />
      )}
      handleIndicatorStyle={{backgroundColor: '#ccc'}}
      enablePanDownToClose={true}
      keyboardBehavior="interactive"
      android_keyboardInputMode="adjustResize">
      <BottomSheetView style={{padding: 16}}>
        {children}
      </BottomSheetView>
    </BottomSheetModal>
  );
});

关键配置说明

1. snapPoints: 定义 Bottom Sheet 的停靠位置，可以使用百分比或具体像素值
2. backdropComponent: 配置背景遮罩，控制何时显示/隐藏
3. keyboardBehavior: 处理键盘弹出时的行为，推荐'interactive'模式
4. enablePanDownToClose: 允许用户通过下滑手势关闭
5. handleIndicatorStyle: 自定义顶部指示器的样式

使用建议

1. 在父组件中包裹 BottomSheetModalProvider
2. 使用 forwardRef 暴露控制方法(如打开/关闭)
3. 考虑添加动态高度调整功能
4. 为不同平台(iOS/Android)做适当调整
5. 添加适当的动画效果提升用户体验

通过这种实现方式，Bottom Sheet 将能正确显示在屏幕底部，不受父组件布局影响，同时保持良好的性能和用户体验。