本教程旨在解决React Native应用中TextInput组件被软键盘遮挡的问题。我们将介绍一种灵活的解决方案，通过监听键盘的弹出与收起事件，动态获取键盘高度，并根据当前焦点状态调整输入框父容器的定位，确保输入框始终可见，从而提升用户输入体验。
1. 理解问题背景
在React Native应用开发中，当用户与TextInput组件交互并触发软键盘弹出时，一个常见的问题是TextInput可能会被软键盘遮挡。这尤其发生在TextInput位于屏幕底部或视图容器的下半部分时，导致用户无法看到正在输入的内容，严重影响了用户体验和可用性。
尽管React Native提供了KeyboardAvoidingView组件来尝试自动处理这种场景，但其行为有时可能不够灵活，尤其是在复杂的自定义布局或特定样式需求下，KeyboardAvoidingView可能无法达到预期的效果。在这种情况下，开发者需要一种更精细、可控的机制来管理TextInput与软键盘的交互。
2. 核心思路：事件驱动的动态定位策略
为了解决TextInput被遮挡的问题，我们可以采用一种事件驱动的动态定位策略。其核心思想是：
- 监听键盘事件： 监测软键盘的弹出（keyboardDidShow）和收起（keyboardDidHide）事件。
- 获取键盘高度： 在键盘弹出事件中，获取当前软键盘的实际高度。
- 管理焦点状态： 跟踪当前哪个TextInput组件获得了焦点。
- 动态调整布局： 根据键盘的高度和当前获得焦点的TextInput，动态调整TextInput所在的父容器的位置，使其始终位于键盘上方可见区域。当键盘收起时，将容器恢复到原始位置。
这种方法允许开发者对布局行为进行更细粒度的控制，以适应各种复杂的UI设计。
3. 实现步骤与代码示例
我们将通过一个注册页面 (SignUpScreen) 的示例来演示如何实现这一功能。该页面包含两个自定义的CustomInput组件。
3.1 CustomInput 组件
首先，我们定义一个可复用的CustomInput组件。为了让父组件能够引用并控制内部的TextInput，我们使用React.forwardRef。同时，CustomInput会通过onFocus和onBlur回调将焦点状态通知给父组件。
// components/CustomInput.js
import React, { forwardRef, useState } from "react";
import { View, Text, TextInput, StyleSheet } from "react-native";
// 假设 COLORS 路径正确，用于主题颜色
import { COLORS } from "../../assets/Colors/Colors";
const CustomInput = forwardRef(
({ onFocus = () => {}, onBlur = () => {}, label, style, ...props }, ref) => {
// 内部状态用于处理输入框的边框颜色等样式
const [isOnFocusInternal, setIsOnFocusInternal] = useState(false);
return (
{label && {label} }
{
onFocus(); // 触发父组件传入的onFocus回调
setIsOnFocusInternal(true);
}}
onBlur={() => {
onBlur(); // 触发父组件传入的onBlur回调
setIsOnFocusInternal(false);
}}
/>
);
}
);
const styles = StyleSheet.create({
container: {
backgroundColor: "white",
width: "80%", // 输入框宽度
borderRadius: 15,
borderWidth: 2,
marginVertical: 5,
marginTop: 10,
},
input: {
paddingHorizontal: 10,
paddingVertical: 15,
},
subtitle: {
color: COLORS.background,
fontSize: 16,
fontWeight: "bold", 
