React Native中解决键盘遮挡输入框问题的实用教程

聖光之護

发布时间：2025-11-11 14:03:01

284人浏览过

来源于php中文网

原创

React Native中解决键盘遮挡输入框问题的实用教程

本教程详细讲解如何在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钩子可以帮助我们获取屏幕的尺寸信息，以便进行相对定位。

实现步骤：优化输入框避让逻辑

以下是实现输入框自动上移的详细步骤和代码解析：

Mokker AI

AI产品图添加背景

下载

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. 监听键盘事件

在组件挂载时，我们注册键盘事件监听器，并在组件卸载时移除它们，以避免内存泄漏。

keyboardDidShow事件会在键盘弹出时触发，其回调函数会接收到一个包含键盘高度信息的事件对象。
keyboardDidHide事件在键盘收起时触发。

  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",

React Query 中 initialData 不生效的常见原因与调试指南

React Query 中 initialData 不生效的常见原因与解决方案

解决 clientHeight 在窗口缩放时无法正确响应高度缩小的问题

React Query 中 initialData 不生效的常见原因与调试方案

解决 clientHeight 在窗口缩放时无法动态缩小的问题