如何在 React Native 中动态提升 TextInput 避开键盘遮挡-js教程-PHP中文网

如何在 react native 中动态提升 textinput 避开键盘遮挡

本教程详细介绍了在 React Native 应用中，当软键盘弹出时，如何确保 TextInput 组件不被遮挡。通过监听键盘事件获取其高度，并结合条件样式动态调整输入字段容器的位置，提供了一种灵活且有效的解决方案，尤其适用于 KeyboardAvoidingView 难以适配的复杂布局。

1. 键盘遮挡问题的背景与挑战

在 React Native 开发中，当用户与表单交互时，软键盘的弹出经常会遮挡屏幕底部的 TextInput 组件，导致用户无法看到输入内容。尽管 React Native 提供了 KeyboardAvoidingView 组件来自动处理这类问题，但其行为有时在复杂的布局（例如带有背景图片、绝对定位元素或自定义滚动行为的界面）中可能不尽如人意，甚至引发新的布局问题。

本教程将介绍一种更为手动但高度可控的方法，通过直接监听键盘事件并动态调整 UI 布局，来精确地解决 TextInput 遮挡问题，从而提升用户体验。

2. 核心概念与技术栈

要实现 TextInput 的动态提升，我们需要掌握以下核心概念和 React Native API：

Keyboard 模块： React Native 提供的 Keyboard 模块允许我们监听软键盘的弹出和隐藏事件。
- Keyboard.addListener('keyboardDidShow', callback)：在键盘完全显示后触发。
- Keyboard.addListener('keyboardDidHide', callback)：在键盘完全隐藏后触发。
- 事件回调函数会接收一个事件对象，其中包含 e.endCoordinates.height，即键盘的高度。
useState Hook： 用于管理组件的局部状态，例如键盘高度和当前哪个 TextInput 处于聚焦状态。
useEffect Hook： 用于处理副作用，例如注册和移除键盘事件监听器，确保资源正确管理。
useRef Hook： 用于获取对组件实例的引用，例如 TextInput 组件，以便在需要时调用其方法（如 focus()）。
useWindowDimensions Hook： 获取设备窗口的尺寸，有助于进行相对定位计算。
条件样式 (Conditional Styling)： 根据 keyboardHeight 和 isOnFocus 等状态变量，动态地应用不同的样式规则，特别是 position: 'absolute' 和 bottom 属性。

3. 实现步骤详解

我们将通过一个注册页面的例子来演示如何实现 TextInput 的动态提升。

3.1 状态初始化与引用管理

首先，在你的功能组件中，初始化必要的 state 变量和 ref：

一键抠图

在线一键抠图换背景

查看详情

import React, { useState, useEffect, useRef } from "react";
import {
  Keyboard,
  View,
  useWindowDimensions,
  // ... 其他必要的导入
} 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(); // 第一个 TextInput 的引用
  const textInput2 = useRef(); // 第二个 TextInput 的引用
  const textInputs = [textInput1, textInput2]; // 方便管理所有 TextInput 引用

  // ... 其他组件逻辑
};

登录后复制

3.2 键盘事件监听与清理

使用 useEffect Hook 来注册和移除键盘事件监听器。这确保了在组件挂载时监听事件，并在组件卸载时清理监听器，防止内存泄漏。

  useEffect(() => {
    // 页面加载后自动聚焦第一个输入框 (可选)
    setTimeout(() => {
      textInputs[0].current?.focus();
    }, 0);

    const keyboardDidShowListener = Keyboard.addListener(
      "keyboardDidShow",
      (e) => {
        setKeyboardHeight(e.endCoordinates.height); // 更新键盘高度
      }
    );

    const keyboardDidHideListener = Keyboard.addListener(
      "keyboardDidHide", // 添加 keyboardDidHide 监听器
      () => {
        setKeyboardHeight(0); // 键盘隐藏时将高度设为0
        setIsOnFocus(0); // 键盘隐藏时清除焦点状态
      }
    );

    // 组件卸载时移除监听器
    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行

登录后复制

3.3 管理输入框焦点状态

为了知道何时需要调整输入框位置，我们需要在 CustomInput 组件的 onFocus 和 onBlur 事件中更新 isOnFocus 状态。这里我们使用一个简单的 1 表示有任何输入框获得焦点，0 表示没有。

// CustomInput 组件的 onFocus 和 onBlur 属性
<CustomInput
  ref={textInputs[0]}
  onChangeText={(e) => handleChange(e, "Username")}
  placeholder="Username"
  value={username}
  onFocus={() => {
    setIsOnFocus(1); // 设置为1表示有输入框获得焦点
  }}
  onBlur={() => {
    // 如果需要更精细的控制，可以判断其他输入框是否仍有焦点
    setIsOnFocus(0); // 失去焦点时清除焦点状态
  }}
/>
<CustomInput
  ref={textInputs[1]}
  onChangeText={(e) => handleChange(e, "Email")}
  placeholder="Email"
  value={email}
  onFocus={() => {
    setIsOnFocus(1); // 设置为1表示有输入框获得焦点
  }}
  onBlur={() => {
    setIsOnFocus(0); // 失去焦点时清除焦点状态
  }}
/>

登录后复制

注意： 原始代码中的 handleChange 函数使用了 eval()，例如 eval(\set${type}`)(e);。在实际开发中，eval()存在安全风险且性能不佳，应避免使用。更安全的做法是使用一个对象来映射状态更新函数，或者直接在onChangeText中调用对应的setter`。例如：

// 替代 eval 的安全做法
const stateSetters = {
  Username: setUsername,
  Email: setEmail,
};

const handleChange = (e, type) => {
  if (stateSetters[type]) {
    stateSetters[type](e);
  }
};

登录后复制

3.4 结构化 UI 与条件样式

关键在于将需要随键盘移动的 TextInput 组件（以及可能伴随它们的其他 UI 元素）包裹在一个父 View 中。然后，根据 isOnFocus 和 keyboardHeight 的值，对这个父 View 应用条件样式。

return (
  <ImageBackground
    resizeMode="stretch"
    source={require("../../assets/AppCustomBackgroundsFrench/SignUpFR.png")}
    style={styles.imageBackground}
  >
    {/* 最外层 View，用于容纳所有内容并控制其在屏幕上的整体位置 */}
    <View
      style={{ flex: 1, alignItems: "center", justifyContent: "flex-end" }}
    >
      <Text style={[styles.title, { top: window.height * 0.34 }]}>
        S'inscrire
      </Text>

      {/* 核心：包裹 TextInput 的容器 View，其样式会根据键盘状态动态变化 */}
      <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" }} // CustomInput 内部样式保持简洁
          value={username}
          onFocus={() => {
            setIsOnFocus(1);
          }}
          onBlur={() => {
            setIsOnFocus(0);
          }}
        />
        <CustomInput
          ref={textInputs[1]}
          onChangeText={(e) => handleChange(e, "Email")}
          placeholder="Email"
          style={{ alignItems: "center" }}
          value={email}
          onFocus={() => {
            setIsOnFocus(1);
          }}
          onBlur={() => {
            setIsOnFocus(0);
          }}
        />
      </View>

      {/* 其他按钮等 UI 元素 */}
      <CustomButton text="Suivant" onPress={onRegisterPressed} type="PRIMARY" top="-1%" />
      <SocialSignInButtons />
      <CustomButton text="Have an account? Sign In" onPress={onSignInPressed} type="TERTIARY" />
    </View>
  </ImageBackground>
);

登录后复制

3.5 CustomInput 组件

CustomInput 组件本身不需要包含复杂的定位逻辑，它只需要通过 forwardRef 转发 ref，并提供 onFocus 和 onBlur 回调即可。

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%" }, 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;

登录后复制

4. 完整代码示例 (SignUpScreen.js)

import { useNavigation } from "@react-navigation/native";
import React, { useState, useEffect, useRef } from "react";
import {
  ImageBackground,
  Keyboard,
  StyleSheet,
  Text,
  View,
  useWindowDimensions,
} from "react-native";

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: no input focused, 1: an input is focused

  const navigation = useNavigation();
  const window = useWindowDimensions();
  const textInput1 = useRef();
  const textInput2 = useRef();
  const textInputs = [textInput1, textInput2];

  useEffect(() => {
    // Optional: Focus the first input on component mount
    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); // Reset focus state when keyboard hides
      }
    );

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

  const onRegisterPressed = () => {
    navigation.navigate("SignUp2");
  };

  const onSignInPressed = () => {
    navigation.navigate("SignIn");
  };

  // Example for handling text input changes
  // WARNING: The original

登录后复制

以上就是如何在 React Native 中动态提升 TextInput 避开键盘遮挡的详细内容，更多请关注php中文网其它相关文章！