Input Component 不支持 React useRef Hook on re-mounting 组件

Question

我正在为登录页面使用钩子，其中文本输入在 1 秒后集中在 组件安装 上。 下面提到的代码适用于第一次安装。如果我们在注销后返回登录屏幕，我会在 1 秒后收到此错误。 （错误在下面提到）

我的代码：（只是粗略！！希望你能理解）

import React, {useState, useRef, useEffect} from 'react';

function Login(props) {
....................
const inputRef = useRef(null);
.............................

useEffect(() => {
setTimeout(() => {
  inputRef.current.focus();
 }, 1000);
}, []);

......................
return(
.....................
<TextInput
        ref={inputRef}
        label="Enter your name"
/>

)

}

export default Login;

错误：

身份验证流程：

function RootNavigation(props) {
  const loginState = useSelector(state => state.LoginSlice.loginStatus);
  const otpLoginState = useSelector(state => state.OtpConfirmSlice.loginStatus);
  return (
    <>
      {loginState || otpLoginState ? <MyDrawer /> : <StartScreenNavigation />}
    </>
  );
}

Answer 1

你为什么不在这里使用autoFocus prop，像这样

<TextInput
    ref={inputRef}
    label="Enter your name"
    autoFocus={true} // This will get focused it when it gets loaded.
/>

如果您在页面上有一个输入框，那很好......但是如果您有多个带有 autoFocus={true} 的输入，这将失败，在这种情况下，它将专注于最后一个 TextInput 组件

工作示例here

你的code 应该看起来像

import React, { useState, useRef, useEffect } from 'react';
import { TextInput } from 'react-native';

function Login(props) {
  return <TextInput placeholder="Enter your name" autoFocus={true} />;
}

export default Login;

2秒后对焦

你可以像这样在屏幕中添加一个监听器

  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      setTimeout(() => {
        // Execute something here
      }, 2000);
    });

    return unsubscribe;
  }, [navigation]);

然后在您的Login 屏幕中，您可以这样做

import * as React from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import Constants from 'expo-constants';

function LoginScreen({ navigation }) {
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      setTimeout(() => {
        console.log('Executed After 2 seconds');
        inputRef.current.focus();
        // Here input will get focused after 2 seconds
      }, 2000);
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <View style={styles.container}>
      <TextInput
        ref={inputRef}
        placeholder="Enter your name here"
        style={{ padding: 10 }}
      />
    </View>
  );
}

export default LoginScreen;