React Native中实现TextInput随键盘弹出而上移的教程-js教程-PHP中文网

react native中实现textinput随键盘弹出而上移的教程

本教程旨在解决React Native应用中`TextInput`被软键盘遮挡的问题。我们将通过监听键盘的显示与隐藏事件，动态获取键盘高度，并结合条件样式调整`TextInput`或其父容器的位置，确保输入框始终可见且位于键盘上方。文章将提供详细的代码示例和实现步骤，帮助开发者优化用户输入体验。

解决React Native中TextInput被键盘遮挡的问题

在React Native应用开发中，当用户与TextInput组件交互时，软键盘的弹出常常会遮挡住输入框，导致用户体验不佳。虽然React Native提供了KeyboardAvoidingView组件来处理这类问题，但在某些复杂的布局场景下，它可能无法完美适配。本文将介绍一种通过手动监听键盘事件并动态调整组件位置的方法，以确保TextInput始终可见。

1. 理解键盘事件监听

React Native的Keyboard模块提供了一系列事件监听器，用于跟踪软键盘的状态。其中最常用的是keyboardDidShow和keyboardDidHide。

keyboardDidShow: 键盘弹出时触发，事件对象中包含键盘的尺寸信息，特别是e.endCoordinates.height，即键盘的高度。
keyboardDidHide: 键盘隐藏时触发。

通过监听这些事件，我们可以在键盘弹出时获取其高度，并在键盘隐藏时重置相关状态。

2. 实现动态定位逻辑

为了使TextInput在键盘弹出时上移，我们需要：

获取键盘的高度。
跟踪当前是否有TextInput处于焦点状态。
根据键盘高度和焦点状态，动态地调整TextInput或其父容器的bottom样式属性。

我们将使用React的useState和useEffect Hook来管理这些状态和副作用。

2.1 状态管理

在组件中定义以下状态：

keyboardHeight: 用于存储键盘的高度。
isOnFocus: 用于标识当前哪个TextInput处于焦点状态（例如，使用数字1、2等表示不同的输入框，0表示无焦点）。
textInputs: 使用useRef创建对TextInput组件的引用，以便在需要时操作它们（例如，设置焦点）。

import React, { useState, useEffect, useRef } from "react";
import { Keyboard, View, useWindowDimensions, StyleSheet, ImageBackground, Text } 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: username输入框焦点, 2: email输入框焦点

  const window = useWindowDimensions();
  const textInput1 = useRef();
  const textInput2 = useRef();
  const textInputs = [textInput1, textInput2]; // 方便管理多个TextInput引用

  // ... 其他业务逻辑
};

登录后复制

2.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",
      () => {
        setKeyboardHeight(0); // 键盘隐藏时重置高度
      }
    );

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

登录后复制

2.3 动态调整组件位置

关键在于根据isOnFocus和keyboardHeight状态，有条件地应用样式。我们可以将所有需要随键盘上移的TextInput组件包裹在一个View中，然后根据条件调整这个包裹View的bottom属性。

一键职达

AI全自动批量代投简历软件，自动浏览招聘网站从海量职位中用AI匹配职位并完成投递的全自动操作，真正实现'一键职达'的便捷体验。

查看详情

  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); // 设置焦点状态为1
            }}
            onBlur={() => {
              setIsOnFocus(0); // 失去焦点时重置状态
            }}
          />
          <CustomInput
            ref={textInputs[1]}
            onChangeText={(e) => handleChange(e, "Email")}
            placeholder="Email"
            style={{
              alignItems: "center",
            }}
            value={email}
            onFocus={() => {
              setIsOnFocus(1); // 注意：这里原示例将两个输入框的isOnFocus都设为1，可能需要根据实际需求调整
            }}
            onBlur={() => {
              setIsOnFocus(0);
            }}
          />
        </View>

        {/* ... 其他组件，例如按钮 */}
        <CustomButton
          text="Suivant"
          onPress={onRegisterPressed}
          type="PRIMARY"
          top="-1%"
        />
        <SocialSignInButtons />
        <CustomButton
          text="Have an account? Sign In"
          onPress={onSignInPressed}
          type="TERTIARY"
        />
      </View>
    </ImageBackground>
  );

登录后复制

注意事项：

在上述代码中，两个CustomInput的onFocus都将isOnFocus设置为1。如果需要区分是哪个输入框获得了焦点，以便更精细地控制定位或样式，可以将setIsOnFocus的值设为不同的标识符（例如，第一个输入框设为1，第二个设为2）。
position: "absolute"是实现这种动态定位的关键。当键盘弹出时，我们将容器的bottom设置为keyboardHeight，使其正好位于键盘上方。当键盘隐藏时，恢复其原始的top定位。

3. CustomInput组件的适配

为了能够通过ref访问TextInput实例，CustomInput组件需要使用forwardRef进行封装。

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 // 接收父组件传递的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} // 将ref转发给内部的TextInput
            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组件的完整代码，包含了上述所有逻辑：

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

// 假设 COLORS 路径正确
import { COLORS } from "../../assets/Colors/Colors";

// 假设 CustomButton, CustomInput, SocialSignInButtons 路径正确
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);
      }
    );

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

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

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

  // 辅助函数，用于处理输入框的值变化
  const handleChange = (e, type) => {
    if (type === "Username") {
      setUsername(e);
    } else if (type === "Email") {
      setEmail(e);
    }
    // 注意：eval() 不推荐在生产环境中使用，这里为了与原问题保持一致。
    // 更安全的做法是使用 switch 或 if/else 结构。
    // 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, // 这里的具体数值可能需要根据实际UI进行微调
                }
          }
        >
          <CustomInput
            ref={textInputs[0]}
            onChangeText={(e) => handleChange(e, "Username")}
            placeholder="Username"
            style={{
              alignItems: "center",
            }}
            value={username}
            onFocus={() => {
              setIsOnFocus(1); // 设置为1表示有输入框获得焦点
            }}
            onBlur={() => {
              setIsOnFocus(0); // 失去焦点时重置
            }}
          />
          <CustomInput
            ref={textInputs[1]}
            onChangeText={(e) => handleChange(e, "Email")}
            placeholder="Email"
            style={{
              alignItems: "center",
            }}
            value={email}
            onFocus={() => {
              setIsOnFocus(1); // 设置为1表示有输入框获得焦点
            }}
            onBlur={() => {
              setIsOnFocus(0); // 失去焦点时重置
            }}
          />
        </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,
  },
  title: {
    position: "absolute",
    fontSize: 24,
    fontWeight: "bold",
    color: "#360d59",
    margin: 10,
    left: "9.7%", // 调整标题位置以适应布局
  },
  // ... 其他样式
});

export default SignUpScreen;

登录后复制

5. 总结与考量

通过上述方法，我们能够灵活地控制TextInput在软键盘弹出时的位置，有效解决了输入框被遮挡的问题。这种手动控制的方式在KeyboardAvoidingView无法满足复杂布局需求时尤其有用。

关键点回顾：

使用Keyboard.addListener监听keyboardDidShow和keyboardDidHide事件。
通过e.endCoordinates.height获取键盘高度。
利用useState管理键盘高度和输入框焦点状态。
通过条件渲染或条件样式，动态调整包含TextInput的父View的position和bottom属性。
确保CustomInput组件通过forwardRef正确转发ref。

进一步的考量：

动画效果： 为了更平滑的用户体验，可以结合Animated API或LayoutAnimation为View的位置变化添加动画效果。
多输入框管理： 当页面有多个输入框时，可能需要更精细的逻辑来判断当前哪个输入框获得焦点，并将其准确地移动到键盘上方，而不是简单地移动一个包含所有输入框的容器。这可能涉及到计算每个输入框在屏幕上的绝对位置，并与键盘顶部进行比较。
KeyboardAvoidingView的替代方案： 虽然本文提供了手动解决方案，但在简单场景下，KeyboardAvoidingView仍然是一个更简洁的选择。理解其behavior属性（如padding、height、position）及其工作原理，有助于在不同场景中做出最佳选择。
平台差异： 尽管Keyboard模块在iOS和Android上表现相似，但某些边缘情况下的键盘行为（例如，预测文本条）可能略有不同，需要进行跨平台测试。

通过掌握这些技术，开发者可以为React Native应用的用户提供更加流畅和无缝的输入体验。

以上就是React Native中实现TextInput随键盘弹出而上移的教程的详细内容，更多请关注php中文网其它相关文章！