React Native 输入字段在输入字符后失去焦点

Question

每次我在任何输入字段中输入字符时，它都会失去焦点，并且除非我单击返回输入字段，否则我无法继续输入。

这是我的登录表单。我检查以确保状态更新正确。似乎每次应用程序重新渲染时它都会失去焦点，但我不明白为什么。我看过很多例子，似乎人们都以和我一样的方式填写表格，所以我不确定出了什么问题。

应用程序.js

import { AppRegistry } from "react-native";
import { StatusBar as ExpoStatusBar } from "expo-status-bar";
import { LoginScreen } from "./src/screens/LoginScreen";

export default function App() {
  return (
    <>
      <LoginScreen />
      <ExpoStatusBar style="auto" />
    </>
  );
}

AppRegistry.registerComponent("meals-to-go", () => App);

LoginForm.js：

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

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

  const LoginScreenContainer = styled.View`
    flex: 1;
    flex-direction: "column";
    justify-content: center;
    gap: 10px;
    padding: 50px;
  `;

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

为了找到问题的根源，我基本上删除了所有可能的代码，但我找不到问题出在哪里。我已经检查了状态并确保其正确更新。看了无数人们在 React Native 中创建表单的例子，我看不出有什么问题。

Answer 1

我的问题是我在 LoginScreen 组件中定义样式组件。基本上，每次我的状态更新时，我的应用程序都会重新声明我的样式组件，导致我的嵌套输入字段不聚焦。