react-native-login-screen使用异常：输入账号密码时键盘自动消失

问题原因 #

每次调用setEmail或setPassword更新状态时，父组件会触发重渲染，而LoginScreen内部的输入框会因为回调函数每次创建新实例、子组件不必要重挂载，导致失去焦点，键盘自动收起。

解决方案 #

1. 缓存回调函数减少重渲染

使用useCallback包裹输入变更的回调函数，避免每次渲染生成新的函数实例，减少子组件的不必要重渲染：

import {View, Text} from 'react-native';
import React, {useState, useCallback} from 'react';
import LoginScreen, {SocialButton} from 'react-native-login-screen';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // 用useCallback缓存回调，避免每次渲染创建新函数
  const handleEmailChange = useCallback((newEmail) => {
    setEmail(newEmail);
  }, []);

  const handlePasswordChange = useCallback((newPassword) => {
    setPassword(newPassword);
  }, []);

  return (
    <LoginScreen
      logoImageSource={require('./data1.jpg')}
      onLoginPress={() => {}}
      onSignupPress={() => {}}
      onEmailChange={handleEmailChange}
      onPasswordChange={handlePasswordChange}
    />
  );
};

export default App;

2. 检查组件版本

尝试升级react-native-login-screen到最新版本，或降级到已知稳定的版本，该问题可能是组件本身的版本bug导致。

3. 改用组件内部状态（备选）

如果上述方法无效，可以移除本地状态，直接在onLoginPress中通过组件ref获取输入值，避免状态更新触发的重渲染：

import {View, Text} from 'react-native';
import React, {useRef} from 'react';
import LoginScreen, {SocialButton} from 'react-native-login-screen';

const App = () => {
  const loginScreenRef = useRef(null);

  const handleLogin = () => {
    // 通过ref获取输入值
    const email = loginScreenRef.current?.getEmail();
    const password = loginScreenRef.current?.getPassword();
    // 处理登录逻辑
  };

  return (
    <LoginScreen
      ref={loginScreenRef}
      logoImageSource={require('./data1.jpg')}
      onLoginPress={handleLogin}
      onSignupPress={() => {}}
    />
  );
};

export default App;

内容的提问来源于stack exchange，提问作者Mohammed HAjji