如何在TextInput挂载后高效实现聚焦并规避导航问题？

核心实现思路 #

避开autoFocus引发的导航过渡问题，同时安全地在组件挂载后聚焦并定位光标到文本末尾，推荐结合**useFocusEffect（React Navigation）+ ref + 文本长度计算**的方案，既符合React规范，又能规避各类边界问题。

代码示例 #

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

const CustomTextInput = ({ initialText = '' }) => {
  const inputRef = useRef(null);
  const [text, setText] = useState(initialText);

  // 聚焦并将光标定位到文本末尾
  const focusWithEndCursor = () => {
    if (inputRef.current) {
      inputRef.current.focus();
      // 多行输入下通过原生属性设置光标位置
      inputRef.current.setNativeProps({
        selection: {
          start: text.length,
          end: text.length,
        },
      });
    }
  };

  // 利用useFocusEffect确保屏幕过渡完成后执行操作
  useFocusEffect(
    React.useCallback(() => {
      // 延迟执行兜底，确保TextInput完成挂载
      const timer = setTimeout(focusWithEndCursor, 100);
      return () => clearTimeout(timer);
    }, [text])
  );

  return (
    <TextInput
      ref={inputRef}
      multiline
      value={text}
      onChangeText={setText}
      // 不设置autoFocus属性
    />
  );
};

export default CustomTextInput;

方案优势 #

• 规避导航过渡bug：完全通过代码控制聚焦时机，不受react-native-screens的过渡逻辑干扰。
• 符合React规范：依赖项仅为状态值text，无需监听ref.current，避免官方不推荐的写法。
• 适配页面刷新场景：useFocusEffect会在屏幕每次聚焦时触发，包括页面刷新后的重新聚焦，结合延迟执行确保组件已挂载。
• 光标定位稳定：通过setNativeProps直接操作原生属性，精准定位到多行文本末尾。

无React Navigation场景的替代方案 #

如果未使用React Navigation，可改用useEffect配合挂载状态标记：

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

const CustomTextInput = ({ initialText = '' }) => {
  const inputRef = useRef(null);
  const [text, setText] = useState(initialText);
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  useEffect(() => {
    if (isMounted && inputRef.current) {
      inputRef.current.focus();
      inputRef.current.setNativeProps({
        selection: { start: text.length, end: text.length }
      });
    }
  }, [isMounted, text]);

  return (
    <TextInput
      ref={inputRef}
      multiline
      value={text}
      onChangeText={setText}
    />
  );
};

内容的提问来源于stack exchange，提问作者Chirag Arora