本教程详细讲解如何在react native应用中，通过监听键盘事件和动态调整ui布局，确保`textinput`组件在软键盘弹出时能够自动上移，避免被遮挡。文章将通过一个实际案例，展示如何利用`keyboard`模块和`position: ‘absolute’`样式，实现输入框的智能避让，提升用户体验。
引言：react Native键盘遮挡问题概述
在react native应用开发中，当用户与表单中的文本输入框（TextInput）交互时，移动设备的软键盘会自动弹出。一个常见且影响用户体验的问题是，如果输入框位于屏幕下半部分，它可能会被弹出的键盘完全或部分遮挡，导致用户无法看到正在输入的内容。
React Native提供了一个内置组件KeyboardAvoidingView来帮助解决这一问题。然而，在某些复杂的布局场景下，KeyboardAvoidingView可能无法完美适配，或者其默认行为不符合特定的设计需求。在这种情况下，开发者可能需要采用更精细的自定义解决方案，通过监听键盘事件并手动调整UI布局来实现输入框的智能避让。
核心原理：监听键盘事件与动态布局
自定义解决键盘遮挡问题的核心在于以下两点：
- 监听键盘事件： 获取键盘的弹出（keyboardDidShow）和收起（keyboardDidHide）状态，以及键盘的高度。
- 动态调整布局： 根据键盘的状态和高度，精确地调整输入框或其父容器的位置，使其始终位于键盘上方。
我们将使用React Native的Keyboard模块来监听键盘事件，并通过组件的useState和useEffect钩子来管理状态和副作用。usewindowDimensions钩子可以帮助我们获取屏幕的尺寸信息，以便进行相对定位。
实现步骤：优化输入框避让逻辑
以下是实现输入框自动上移的详细步骤和代码解析：
1. 状态管理
我们需要两个关键的状态来控制UI行为：
- keyboardHeight: 存储当前软键盘的高度。当键盘隐藏时，此值为0。
- isOnFocus: 标识是否有输入框当前处于聚焦状态。这里我们使用一个数字来表示，0代表无聚焦，1代表有聚焦（或特定输入框聚焦）。
import React, { useState, useEffect, useRef } from "react"; import { Keyboard, View, useWindowDimensions, StyleSheet, // ... 其他必要的导入 } from "react-native"; // ... 其他组件导入 const SignUpScreen = () => { const [username, setUsername] = useState(""); const [email, setEmail] = useState(""); const [keyboardHeight, setKeyboardHeight] = useState(0); const [isOnFocus, setIsOnFocus] = useState(0); // 0: 无聚焦, 1: 有输入框聚焦 const window = useWindowDimensions(); const textInput1 = useRef(); const textInput2 = useRef(); const textInputs = [textInput1, textInput2]; // ... 其他代码 };
2. 监听键盘事件
在组件挂载时，我们注册键盘事件监听器，并在组件卸载时移除它们，以避免内存泄漏。
useEffect(() => { // 示例：组件加载后自动聚焦第一个输入框 setTimeout(() => { textInputs[0].current?.focus(); }, 0); // 监听键盘弹出事件 const keyboardDidShowListener = Keyboard.addListener( "keyboardDidShow", (e) => { setKeyboardHeight(e.endCoordinates.height); // 获取键盘高度 } ); // 监听键盘隐藏事件 const keyboardDidHideListener = Keyboard.addListener( "keyboardDidHide", // 注意这里需要指定事件类型 () => { setKeyboardHeight(0); // 键盘隐藏时重置高度 setIsOnFocus(0); // 键盘隐藏时，所有输入框都视为失去焦点 } ); // 组件卸载时移除监听器 return () => { keyboardDidHideListener.remove(); keyboardDidShowListener.remove(); }; }, []); // 空依赖数组表示只在组件挂载和卸载时运行
3. 动态调整父容器布局
这是实现输入框上移的关键。我们将输入框包裹在一个View容器中，并根据isOnFocus和keyboardHeight的状态，动态地调整这个容器的bottom或top样式。
- 当有输入框聚焦（isOnFocus != 0）且键盘弹出（keyboardHeight != 0）时，我们将容器的bottom样式设置为keyboardHeight，使其紧贴键盘上方。
- 否则（无聚焦或键盘隐藏），容器恢复到其初始的定位。这里我们使用position: ‘absolute’和top来精确控制其初始位置。
return ( <ImageBackground resizeMode="stretch" source={require("../../assets/appCustomBackgroundsFrench/SignUpFR.png")} style={styles.imageBackground} > {/* 主要内容容器，flex: 1 确保它占据可用空间 */} <View style={{ flex: 1, alignItems: "center", justifyContent: "flex-end" }} > {/* 标题，使用绝对定位以避免被其他内容影响 */} <Text style={[styles.title, { top: window.height * 0.34 }]}> S'inscrire </Text> {/* 动态调整位置的输入框容器 */} <View style={ isOnFocus != 0 && keyboardHeight != 0 ? { position: "absolute", width: "100%", alignItems: "center", bottom: keyboardHeight, // 键盘弹出时，定位在键盘上方 } : { position: "absolute", width: "100%", alignItems: "center", top: window.height * 0.37 + 49, // 键盘隐藏时的初始位置 } } > {/* CustomInput 组件 */} <CustomInput ref={textInputs[0]} onChangeText={(e) => handleChange(e, "Username")} placeholder="Username" style={{ alignItems: "center", }} value={username} onFocus={() => { setIsOnFocus(1); // 设置为聚焦状态 }} onBlur={() => { // 注意：这里不直接设置为0，因为可能还有其他输入框聚焦。 // 更好的做法是判断所有输入框是否都失焦，或者在keyboardDidHide时统一设置。 // 为了简化，本例中在keyboardDidHide时统一设置为0。 }} /> <CustomInput ref={textInputs[1]} onChangeText={(e) => handleChange(e, "Email")} placeholder="Email" style={{ alignItems: "center", }} value={email} onFocus={() => { setIsOnFocus(1); // 设置为聚焦状态 }} onBlur={() => { // 同上 }} /> </View> {/* 其他按钮等 */} <CustomButton text="Suivant" onPress={onRegisterPressed} type="PRIMARY" top="-1%" /> <SocialSignInButtons /> <CustomButton text="Have an account? Sign In" onPress={onSignInPressed} type="TERTIARY" /> </View> </ImageBackground> ); };
4. CustomInput组件的适配
CustomInput组件本身不需要包含复杂的定位逻辑。它只需要通过forwardRef将ref传递给内部的TextInput，并提供onFocus和onBlur回调，以便父组件能够监听并更新isOnFocus状态。
import { View, Text, TextInput, StyleSheet } from "react-native"; import React, { forwardRef, useState } from "react"; import { COLORS } from "../../assets/Colors/Colors"; const CustomInput = forwardRef( ( { onFocus = () => {}, onBlur = () => {}, onLayout, label, style, ...props }, ref ) => { const [isInputFocused, setIsInputFocused] = useState(false); // 内部状态用于边框颜色 return ( <View style={[{ width: "100%", alignItems: "center" }, style]}> {/* 确保内部内容居中 */} {label && <Text style={styles.subtitle}>{label}</Text>} <View style={[ styles.container, { borderColor: isInputFocused ? "yellow" : COLORS.input_Border_Violet }, ]} > <TextInput ref={ref} autocorrect={false} style={styles.input} {...props} onFocus={() => { onFocus(); // 调用父组件传入的onFocus setIsInputFocused(true); // 更新内部聚焦状态 }} onLayout={onLayout} onBlur={() => { onBlur(); // 调用父组件传入的onBlur setIsInputFocused(false); // 更新内部聚焦状态 }} /> </View> </View> ); } ); 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", }, }); export default CustomInput;
完整示例代码：SignUpScreen
import { useNavigation } from "@react-navigation/native"; import React, { useState, useEffect, useRef } from "react"; import { ImageBackground, Keyboard, SafeAreaView, // 虽然本例未使用，但通常建议使用 StyleSheet, Text, View, useWindowDimensions, } from "react-native"; // import Constants from "expo-constants"; // 示例中未使用，如果需要状态栏高度等可以导入 import { COLORS } from "../../assets/Colors/Colors"; // 假设的颜色配置文件 import CustomButton from "../../components/CustomButton"; import CustomInput from "../../components/CustomInput"; import SocialSignInButtons from "../../components/SocialSignInButtons"; const SignUpScreen = () => { const [username, setUsername] = useState(""); const [email, setEmail] = useState(""); const [keyboardHeight, setKeyboardHeight] = useState(0); const [isOnFocus, setIsOnFocus] = useState(0); // 0: 无聚焦, 1: 有输入框聚焦 const navigation = useNavigation(); const window = useWindowDimensions(); const textInput1 = useRef(); const textInput2 = useRef(); const textInputs = [textInput1, textInput2]; useEffect(() => { setTimeout(() => { textInputs[0].current?.focus(); // 页面加载后自动聚焦第一个输入框 }, 0); const keyboardDidShowListener = Keyboard.addListener( "keyboardDidShow", (e) => { setKeyboardHeight(e.endCoordinates.height); } ); const keyboardDidHideListener = Keyboard.addListener( "keyboardDidHide", // 明确指定隐藏事件 () => { setKeyboardHeight(0); setIsOnFocus(0); // 键盘隐藏时，所有输入框都视为失去焦点 } ); return () => { keyboardDidHideListener.remove(); keyboardDidShowListener.remove(); }; }, []); const onRegisterPressed = () => { navigation.navigate("SignUp2"); }; const onSignInPressed = () => { navigation.navigate("SignIn"); }; const onTermsOfUsePressed = () => { console.warn("Terms of Use"); }; const onPrivacyPolicyPressed = () => { console.warn("Privacy Policy"); }; const handleChange = (e, type) => { // 更好的做法是使用 switch 或 if/else if 结构来更新状态 // 例如：if (type === "Username") setUsername(e); else if (type === "Email") setEmail(e); // 避免使用 eval，因为它存在安全风险和性能问题。 eval(`set${type}`)(e); }; return ( <ImageBackground resizeMode="stretch" source={require("../../assets/AppCustomBackgroundsFrench/SignUpFR.png")} style={styles.imageBackground} > <View style={{ flex: 1, alignItems: "center", justifyContent: "flex-end" }} > <Text style={[styles.title, { top: window.height * 0.34 }]}> S'inscrire </Text> <View style={ isOnFocus != 0 && keyboardHeight != 0 ? { position: "absolute", width: "100%", alignItems: "center", bottom: keyboardHeight, } : { position: "absolute", width: "100%", alignItems: "center", top: window.height * 0.37 + 49, } } > <CustomInput ref={textInputs[0]} onChangeText={(e) => handleChange(e, "Username")} placeholder="Username" style={{ alignItems: "center", }} value={username} onFocus={() => { setIsOnFocus(1); // 标记有输入框聚焦 console.warn(window.height); // 调试信息 }} onBlur={() => { // 这里的 onBlur 不再直接设置 isOnFocus(0)， // 因为可能焦点只是从一个输入框转移到另一个，而不是完全失去焦点。 // 统一在 keyboardDidHide 时重置 isOnFocus。 }} /> <CustomInput ref={textInputs[1]} onChangeText={(e) => handleChange(e, "Email")} placeholder="Email" style={{ alignItems: "center", }} value={email} onFocus={() => { setIsOnFocus(1); // 标记有输入框聚焦 }} onBlur={() => { // 同上 }} /> </View> <CustomButton text="Suivant" onPress={onRegisterPressed} type="PRIMARY" top="-1%" /> <SocialSignInButtons /> <CustomButton text="Have an account? Sign In" onPress={onSignInPressed} type="TERTIARY" /> </View> </ImageBackground> ); }; const styles = StyleSheet.create({ imageBackground: { flex: 1, // 注意：这里的 alignItems: "center" 已被移除，改为在内部 View 上设置， // 以便 ImageBackground 可以全屏显示，而内容可以独立居中。 }, title: { position: "absolute",