React Native中@gorhom/bottom-sheet输入框激活时底部弹窗内容收缩问题

问题说明 #

在React Native（Typescript）项目中使用@gorhom/bottom-sheet库，将BottomSheetTextInput嵌入BottomSheetView内时出现异常：

• 输入框未激活时，BottomSheet高度为屏幕80%，显示正常
• 点击输入框后，BottomSheet扩展至屏幕100%高度，但内部BottomSheetView收缩至一半尺寸并停留在顶部

未激活状态：

激活后状态：

可行解决方案 #

1. 绑定BottomSheet与BottomSheetView的滚动引用 #

BottomSheetView需要和BottomSheet的滚动引用关联，才能让视图跟随底部弹窗的高度变化同步调整：

import { BottomSheet, BottomSheetView, BottomSheetTextInput } from '@gorhom/bottom-sheet';
import { useRef } from 'react';

const YourComponent = () => {
  const bottomSheetRef = useRef<BottomSheet>(null);
  const scrollableRef = useRef<BottomSheetView>(null);

  return (
    <BottomSheet
      ref={bottomSheetRef}
      snapPoints={['80%', '100%']}
      scrollableComponentRef={scrollableRef}
    >
      <BottomSheetView ref={scrollableRef}>
        <BottomSheetTextInput placeholder="输入内容" />
        {/* 其他组件内容 */}
      </BottomSheetView>
    </BottomSheet>
  );
};

2. 调整键盘适配行为 #

库的默认键盘逻辑可能导致视图偏移，可手动指定键盘行为：

<BottomSheet
  // 保留其他属性
  keyboardBehavior="extend" // 可选"extend"/"none"，根据场景调整
  keyboardBlurBehavior="restore"
>
  {/* 内部视图 */}
</BottomSheet>

3. 给BottomSheetView添加flex布局 #

确保内部视图能自动填充BottomSheet的可用高度：

<BottomSheetView 
  ref={scrollableRef}
  style={{ flex: 1 }}
>
  {/* 输入框及其他内容 */}
</BottomSheetView>

4. 排查外部布局干扰 #

检查父容器或全局样式是否限制了BottomSheetView的高度，避免使用固定高度、overflow: hidden等可能导致布局异常的属性。

内容的提问来源于stack exchange，提问作者Jovan Jevtić