导航到屏幕时无法聚焦react-native-paper TextInput如何可靠解决？

DevOps 小满

2026-10-4

问题根因

你当前的写法存在两个核心问题：

每次组件重渲染都会创建新的createRef实例，并且重复注册focus事件监听器、没有做清理，会导致第二次及之后进入页面时，ref指向异常、监听器逻辑冲突
屏幕focus事件触发时，输入框可能还未完成挂载渲染，直接调用focus方法无效
同时autoFocus属性不生效是正常现象：react-native-navigation 页面切换的时机晚于组件初始化时autoFocus的触发时机，页面真正可见时autoFocus逻辑已经执行完毕，自然不会生效。

修复后代码

import { useEffect, useRef, useState } from 'react';
import { View, requestAnimationFrame } from 'react-native';
import { TextInput } from 'react-native-paper';

export default function NewAccountScreen({ navigation }) {
  const [name, setName] = useState('');
  // 用useRef保证引用在组件生命周期内稳定
  const textInputRef = useRef(null);

  useEffect(() => {
    const focusOnInput = () => {
      // 等待页面渲染完成后再执行聚焦，规避组件未挂载完成的问题
      requestAnimationFrame(() => {
        textInputRef.current?.focus();
      });
      // 低概率场景下requestAnimationFrame不生效可以替换为短延时setTimeout：
      // setTimeout(() => textInputRef.current?.focus(), 100);
    };

    // 注册focus监听器
    const unsubscribe = navigation.addListener("focus", focusOnInput);
    // 组件卸载时清理监听器，避免重复注册和内存泄漏
    return unsubscribe;
  }, [navigation]);

  return (
    <View>
      <TextInput ref={textInputRef} label="Account name" value={name} onChangeText={setName}/>
    </View>
  )
}