React Native输入框输入字符后失焦问题求助

问题根源在于你将styled-components创建的LoginScreenContainer组件定义在了LoginScreen函数组件的内部。每次输入字符触发状态更新时，LoginScreen会重新执行，这会导致LoginScreenContainer被重新创建为一个全新的组件。React会识别为整个容器元素发生了变化，进而卸载旧容器及其内部的TextInput，再重新渲染新的容器和输入框，输入框自然就失去了焦点。

修复步骤： #

1. 将LoginScreenContainer移到LoginScreen函数组件的外部，确保它只被创建一次，不会随组件渲染重复生成。
2. 移除flex-direction值上多余的双引号（语法错误，可能导致样式异常）。

修改后的LoginScreen.js代码：

import React, { useState } from "react";
import { TextInput } from "react-native";
import styled from "styled-components/native";

// 把styled组件移到函数外部，避免重复创建
const LoginScreenContainer = styled.View`
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 50px;
`;

export const LoginScreen = ({ navigation }) => {
  const [text, setText] = useState("");

  return (
    <LoginScreenContainer>
      <TextInput
        onChangeText={(text) => setText(text)}
        value={text}
        placeholder="Insert your text!"
      />
    </LoginScreenContainer>
  );
};

这样修改后，输入框在状态更新时不会被重新挂载，就能保持焦点正常输入了。

内容的提问来源于stack exchange，提问作者Vini Bjazevich