@gorhom/bottom-sheet v5.2.4中BottomSheetTextInput偶被键盘遮挡（RN0.81.1）

在@gorhom/bottom-sheet模态框中遇到不稳定的键盘交互问题：有时键盘正常上推BottomSheetTextInput使其可见，有时会遮挡输入框。同一设备/运行会话中行为时而正常时而异常。

环境信息 #

• react-native: 0.81.1
• @gorhom/bottom-sheet: 5.2.4
• @gorhom/portal: ^1.0.14

使用的代码结构 #

<DynamicSheet snapPoints={['60%']} ref={ref} onClose={onClose}
  footerComponent={({ animatedFooterPosition }) =>
    !activeSection ? <Footer animatedFooterPosition={animatedFooterPosition} handleClear={handleClear} handleApply={handleApply} /> : undefined
  }
>
  <View style={{ paddingBottom: 150 }}>
    <View style={styles.sheetHeader}>
      <Text style={styles.sheetTitle}>Filters</Text>
    </View>
    <BottomSheetScrollView
      contentContainerStyle={styles.sheetContentContainer}
      keyboardShouldPersistTaps="handled"
      showsVerticalScrollIndicator={false}
    >
      <View style={styles.content}>
        {renderSectionContent()}  {/* contains BottomSheetTextInput */}
      </View>
    </BottomSheetScrollView>
  </View>
</DynamicSheet>

DynamicSheet组件代码 #

import React, { forwardRef, useCallback, useRef } from 'react';
import {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
  BottomSheetModal,
  BottomSheetFooterProps,
} from '@gorhom/bottom-sheet';
import { Keyboard, StyleSheet } from 'react-native';

type Props = {
  children: React.ReactNode;
  snapPoints?: string[];
  maxDynamicContentSize?: number;
  disableCollapse?: boolean;
  footerComponent?: React.FC<BottomSheetFooterProps>;
  onClose?: () => void;
};

const DynamicSheet = forwardRef<BottomSheetModal, Props>(
  ({ children, snapPoints, maxDynamicContentSize = 800, disableCollapse = false, footerComponent, onClose }, ref) => {
    const lastIndexRef = useRef<number>(0);

    const renderBackdrop = (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} pressBehavior="close" />
    );

    const handleSheetChanges = useCallback(
      (index: number) => {
        if (lastIndexRef.current >= 0 && index === -1) {
          Keyboard.dismiss();
          onClose?.();
        }
        lastIndexRef.current = index;
      },
      [onClose],
    );

    return (
      <BottomSheetModal
        ref={ref}
        backdropComponent={renderBackdrop}
        {...(snapPoints && snapPoints.length ? { snapPoints } : {})}
        enableDynamicSizing={!snapPoints}
        maxDynamicContentSize={maxDynamicContentSize}
        enablePanDownToClose={!disableCollapse}
        enableHandlePanningGesture={!disableCollapse}
        enableContentPanningGesture={!disableCollapse}
        footerComponent={footerComponent}
        onChange={handleSheetChanges}
        style={styles.container}
      >
        {children}
      </BottomSheetModal>
    );
  },
);

export default DynamicSheet;

const styles = StyleSheet.create({
  container: { paddingHorizontal: 16 },
});

预期行为 #

当BottomSheetTextInput获得焦点时，底部弹窗/内容应上移，确保输入框显示在键盘上方。

实际现象 #

有时功能正常；其他时候键盘会覆盖输入框，需手动拖动弹窗或切换键盘才能使其可见。无日志/错误信息，运行时表现不一致。

现象说明：键盘遮挡输入框

已尝试的解决方案 #

• 将View容器替换为BottomSheetView
• 切换enableDynamicSizing、enableContentPanningGesture配置
• 为容器和内容添加paddingBottom
• 导航时关闭弹窗（重写navigation.navigate）
• 使用配置了keyboardShouldPersistTaps="handled"的BottomSheetScrollView

可能相关的其他问题 #

当弹窗高度超过屏幕且键盘弹出时，弹窗会自行关闭。键盘刚弹出时弹窗显示正常，推测是弹窗计算键盘弹出后的高度超过屏幕导致关闭。仅在Android 16.0（API 36.0）模拟器测试，暂未测试iOS。

现象说明：弹窗自行关闭

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