React Native执行navigate.goBack()后TextInput自动聚焦失败求助

失效核心原因 #

你写的逻辑本身思路是正确的，失效的核心问题是React Navigation的focus事件触发时机早于页面原生元素的渲染完成时机，此时textInput.current虽然已经存在，但对应的原生输入框还没完成挂载，调用focus()不会生效。

修正方案 #

在聚焦逻辑前增加异步等待逻辑，等页面渲染完成后再执行聚焦操作，同时增加判空逻辑避免异常：

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

const textInput = useRef();

useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      loadData();
      // 增加延迟+判空，等待原生元素渲染完成
      setTimeout(() => {
        textInput.current?.focus();
      }, 100);
    });

    return unsubscribe;
}, [navigation]);

// TextInput部分保持不变即可
<TextInput      
    ref={textInput}            
    value={text}
    placeholder="Your name"
    style={styles.textInput}
/>

可选优化 #

如果你使用的是React Navigation 6及以上版本，可以用官方提供的useFocusEffect钩子替代手动监听事件，写法更简洁：

import { useFocusEffect } from '@react-navigation/native';
import React, { useCallback, useRef } from 'react';

const textInput = useRef();

useFocusEffect(
  useCallback(() => {
    loadData();
    const timer = setTimeout(() => {
      textInput.current?.focus();
    }, 100);
    return () => clearTimeout(timer);
  }, [])
);

注：100ms的延迟可以根据你自己的页面渲染速度调整，大部分场景下设置50-200ms都可以正常生效，不会有明显的感知延迟。如果你的项目开启了react-native-screens原生屏优化，可将延迟调整到300ms左右兼容。

内容的提问来源于stack exchange，提问作者Abdelouali Benkheil