React Navigation v4跳转至搜索页时自动聚焦自定义输入框问题

步骤1：首页跳转时传递触发参数 #

修改首页的跳转逻辑，在调用navigate时传入触发聚焦的参数：

const HomeScreen = ({ navigation }) => (
  // 页面其他内容
  <Button onPress={() => navigation.navigate("Search", { focusInput: true })} />
);

步骤2：搜索页监听页面聚焦事件并执行聚焦 #

在React Navigation v4中，函数组件需要监听页面的didFocus事件（页面完全显示并获得焦点时触发），确保组件渲染完成后再调用聚焦方法：

import React, { useEffect, useRef } from 'react';
import SearchBar from './SearchBar'; // 引入你的自定义组件

const SearchScreen = ({ navigation }) => {
  const searchInputRef = useRef();

  useEffect(() => {
    const unsubscribe = navigation.addListener('didFocus', () => {
      const shouldFocus = navigation.getParam('focusInput', false);
      if (shouldFocus) {
        // 短暂延迟确保组件已完成挂载
        setTimeout(() => {
          searchInputRef.current?.onFocus();
        }, 100);
      }
    });

    // 组件卸载时移除监听，避免内存泄漏
    return unsubscribe;
  }, [navigation]);

  return (
    <SearchBar ref={searchInputRef} />
  );
};

步骤3：完善自定义SearchBar组件的ref绑定 #

确保SearchBar组件内的textInputRef正确绑定到实际的输入元素上：

const SearchBar = React.forwardRef((props, ref) => {
  const [searchQuery, setSearchQuery] = React.useState('');
  const textInputRef = React.useRef();

  React.useImperativeHandle(ref, () => ({
    getText: () => searchQuery,
    onFocus: () => textInputRef.current?.focus(),
  }));

  // 绑定ref到实际输入组件
  return (
    {/* Web环境用input */}
    <input 
      ref={textInputRef}
      value={searchQuery}
      onChange={(e) => setSearchQuery(e.target.value)}
      {...props}
    />
    {/* React Native环境替换为TextInput：
    <TextInput 
      ref={textInputRef}
      value={searchQuery}
      onChangeText={setSearchQuery}
      {...props}
    /> */}
  );
});

问题根源说明 #

1. 原首页跳转未传递focusInput参数，导致搜索页获取的参数为默认false，无法触发聚焦逻辑。
2. 直接依赖focusInput的useEffect可能在组件未完全挂载时执行，此时searchInputRef.current还未初始化，调用onFocus无效。
3. 监听didFocus事件能确保页面完全显示后再执行聚焦，配合短暂延迟可规避组件未渲染完成的问题。

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