如何固定React Native中@gorhom/bottom-sheet高度并修复内容溢出

问题核心原因 #

你的代码存在几个关键问题导致异常：

• 嵌套两层ScrollView且禁用内层滚动，引发滚动逻辑冲突
• 固定contentHeight导致内容变化时无法自适应高度
• Footer组件样式设置错误，被内容覆盖或布局异常
• 键盘显示/隐藏时的snapPoints和动态尺寸逻辑存在冲突

具体修复方案 #

1. 简化ScrollView嵌套结构

移除多余的KeyboardAwareScrollView嵌套，直接使用BottomSheetScrollView处理滚动和键盘适配（@gorhom/bottom-sheet的ScrollView已原生支持键盘适配），避免滚动逻辑冲突：

// 替换原有的ScrollView嵌套部分
<BottomSheetScrollView 
  scrollEnabled={options.scrollEnabled}
  contentContainerStyle={{ flexGrow: 1 }}
  keyboardShouldPersistTaps="handled"
  onKeyboardWillShow={() => setKeyboardVisible(true)}
  onKeyboardWillHide={() => setKeyboardVisible(false)}
>
  {options.component}
</BottomSheetScrollView>

2. 移除固定contentHeight，启用动态尺寸计算

固定的contentHeight会让底部弹窗无法根据内容自动调整高度，移除该属性，依赖enableDynamicSizing自动计算高度：

<BottomSheetModal
  index={0}
  backdropComponent={renderBackdrop}
  onDismiss={() => close()}
  enableDismissOnClose={true}
  // 移除contentHeight={options.height}
  {...props}
  ref={ref}
  snapPoints={isKeyboardVisible ? [keyboard] : props.snapPoints}
  enableDynamicSizing={isKeyboardVisible ? false : true}
  // ...其他属性
>

若需要初始高度，可通过snapPoints设置，而非固定contentHeight。

3. 修复Footer组件样式

原Footer设置height: "100%"会让Footer撑满整个弹窗，覆盖内容，修改为合适的固定高度或自适应布局：

const renderFooter = useCallback((props: BottomSheetFooterProps) => {
  return (
    <BottomSheetFooter
      {...props}
      style={{
        // 移除height: "100%"，设置合适的内边距或高度
        paddingVertical: 16,
        justifyContent: "flex-end",
      }}
    >
      <View pointerEvents="none">
        <Image
          source={require("../../../public/images/rainbow_footer_small_3.png")}
          style={{
            width: 153,
            height: 127.5,
          }}
        />
      </View>
    </BottomSheetFooter>
  )
}, [])

4. 优化containerStyle布局

确保containerStyle设置正确的flex布局，避免内容溢出：

<BottomSheetModal
  // ...其他属性
  containerStyle={[
    options.containerStyle,
    { flex: 1 } // 确保容器占满可用空间
  ]}
  // ...其他属性
>

5. 调整键盘显示时的snapPoints逻辑

避免使用固定"100%"导致内容顶到屏幕边缘，改用相对值：

const keyboard = options.keyboard ? options.keyboard : "90%"

完整修复后的核心代码片段 #

// ...其他代码
return (
  <BottomSheetModal
    index={0}
    backdropComponent={renderBackdrop}
    onDismiss={() => close()}
    enableDismissOnClose={true}
    {...props}
    ref={ref}
    snapPoints={isKeyboardVisible ? [keyboard] : props.snapPoints}
    enableDynamicSizing={isKeyboardVisible ? false : true}
    style={[
      options.style,
      {
        marginHorizontal: getMarginHorizontal(),
      },
    ]}
    backgroundComponent={
      options.background === "pattern"
        ? renderBackgroundWithPattern
        : undefined
    }
    footerComponent={options.footer === "rgb" ? renderFooter : undefined}
    handleStyle={options.handleStyle}
    containerStyle={[
      options.containerStyle,
      { flex: 1 }
    ]}
    backgroundStyle={options.backgroundStyle}
    handleIndicatorStyle={[
      options.handleIndicatorStyle,
      { backgroundColor: "#E6E6E6" },
    ]}
  >
    <BottomSheetScrollView 
      scrollEnabled={options.scrollEnabled}
      contentContainerStyle={{ flexGrow: 1 }}
      keyboardShouldPersistTaps="handled"
      onKeyboardWillShow={() => setKeyboardVisible(true)}
      onKeyboardWillHide={() => setKeyboardVisible(false)}
    >
      {options.component}
    </BottomSheetScrollView>
  </BottomSheetModal>
)
// ...其他代码

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