React Native函数式组件Tab导航下TextInput autoFocus返回失效如何解决

失效原因 #

你使用的标签栏导航默认不会销毁切走的页面，所以autoFocus属性仅会在页面首次渲染时触发一次，空依赖的useEffect也只会在页面首次挂载时执行，切走再返回时页面没有重新挂载，所以自动聚焦失效。

解决方案 #

核心逻辑是监听页面激活状态，每次搜索页显示时手动触发输入框聚焦，操作步骤如下：

• 给Input组件绑定ref，用于手动控制聚焦
• 监听搜索标签页的激活状态，页面激活时调用输入框的focus方法

如果使用React Navigation做标签导航，完整实现代码如下：

1. 导入所需钩子

import { useRef, useEffect } from 'react';
import { useIsFocused } from '@react-navigation/native';

2. 组件内添加聚焦逻辑

// 给输入框创建ref
const inputRef = useRef(null);
// 获取当前页面是否处于激活状态
const isFocused = useIsFocused();

// 监听页面激活状态，激活时手动聚焦输入框
useEffect(() => {
  if (isFocused) {
    inputRef.current?.focus();
  }
}, [isFocused]);

3. 给Input组件添加ref属性，其余原有配置保持不变即可

<Input
  ref={inputRef}
  placeholder={'Ürün ara'}
  value={barcodes}
  onChangeText={text => onChangeText(text)}
  onSubmitEditing={event => {
    if (event.nativeEvent.text.length === 13) {
      getir(event.nativeEvent.text);
    }
  }}
  keyboardType="number-pad"
  autoFocus
  blurOnSubmit={false}
  contextMenuHidden={true}
  maxLength={13}
  style={{
    paddingRight: dimensions.width * 0.125,
    paddingLeft: dimensions.width * 0.03,
  }}
/>

如果你使用的是其他导航框架，只要找到对应标签页激活的事件监听方法，替换上述isFocused的判断逻辑即可。

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