React Native Bottom Sheet 模态框键盘避让问题解决方案

问题背景

在使用 React Native Bottom Sheet 库时，开发者经常会遇到一个常见问题：当模态框底部表单中包含输入框时，键盘弹出时无法自动调整位置，导致输入框被键盘遮挡。这种情况在移动端开发中尤为常见，会严重影响用户体验。

问题分析

该问题本质上是因为 React Native 的默认键盘处理机制与 Bottom Sheet 组件的交互存在兼容性问题。常规的 TextInput 组件在键盘弹出时无法自动调整位置，特别是在 Bottom Sheet 这种自定义模态组件中。

解决方案

React Native Bottom Sheet 库提供了一个专门的 BottomSheetTextInput 组件来解决这个问题。这个组件是专门为 Bottom Sheet 环境优化的，能够正确处理键盘弹出时的布局调整。

实现方法

开发者可以创建一个自定义输入组件，根据使用场景自动选择使用普通 TextInput 还是 BottomSheetTextInput。以下是一个完整实现示例：

import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
import { useState } from "react";
import { TextInputProps, TextStyle } from "react-native";
import { TextInput } from "react-native-paper";

interface CustomInputProps extends TextInputProps {
  label?: string;
  mode?: "outlined" | "flat";
  style?: TextStyle;
  disabled?: boolean;
  error?: boolean;
  autoCapitalize?: "none" | "sentences" | "words" | "characters";
  numberOfLines?: number;
  keyboardType?: "default" | "number-pad" | "decimal-pad" | "numeric" | "email-address" | "phone-pad";
  type?: "text" | "password";
  onModal?: boolean;
}

const AdvancedInput = (props: CustomInputProps) => {
  const [hidePassword, setHidePassword] = useState(true);

  return (
    <TextInput
      {...props}
      numberOfLines={props.numberOfLines}
      disabled={props.disabled}
      label={props.label}
      mode={props.mode ?? "outlined"}
      style={{
        backgroundColor: props.disabled ? "#f5f5f5" : "white",
        ...props.style,
      }}
      error={props.error}
      autoCapitalize={props.autoCapitalize ?? "none"}
      keyboardType={props.keyboardType ?? "default"}
      render={
        props.onModal
          ? (innerProps) => <BottomSheetTextInput {...innerProps} />
          : undefined
      }
      secureTextEntry={props.type === "password" && hidePassword}
      right={
        props.type === "password" ? (
          <TextInput.Icon
            icon={!hidePassword ? "eye-off" : "eye"}
            onPress={() => setHidePassword(!hidePassword)}
          />
        ) : undefined
      }
    />
  );
};

关键点解析

1. props.onModal 属性：通过这个布尔值属性决定是否在模态框中使用输入组件
2. render 属性：当 onModal 为 true 时，使用 BottomSheetTextInput 渲染输入框
3. 密码输入支持：组件内置了密码可见性切换功能
4. 样式适配：自动处理禁用状态下的背景色等样式问题

最佳实践建议

1. 在 Bottom Sheet 中使用输入组件时，务必设置 onModal={true}
2. 对于复杂表单，考虑结合 KeyboardAvoidingView 使用
3. 测试不同键盘类型（数字键盘、邮箱键盘等）下的表现
4. 在 Android 和 iOS 平台上分别测试，确保一致体验

总结

通过使用 BottomSheetTextInput 组件，开发者可以轻松解决 Bottom Sheet 中键盘遮挡输入框的问题。上述实现方案不仅解决了基本问题，还提供了密码输入、多行文本等扩展功能，是一个生产环境可用的完整解决方案。