React Native Material顶部导航双Tab输入框键盘闪烁问题求助

问题描述 #

• 采用Material Top Bar Navigation，包含两个Tab：Entry-item Tab、search-items Tab
• 两个Tab内的输入框均设置autoFocus且为数字输入类型，打开Tab时输入框自动聚焦，但会先显示字母数字键盘再切换为数字键盘
• 输入时出现键盘闪烁，焦点自动跳转到第二个Tab的搜索输入框，根源是第二个Tab的Searchbar设置了onBlur={() => inputref.current?.focus()}，触发焦点强制切换导致Tab切换和键盘闪烁
• 已尝试native-paper、react-native原生、Material系列TextInput/SearchBar组件，以及react-native-spacer（因will_unmount错误无法使用）

核心修复：移除强制焦点逻辑 #

直接删掉Searchbar的onBlur属性——这个逻辑会在输入框失焦时强制重新聚焦，一旦其他操作导致短暂失焦（比如Tab切换、键盘弹出瞬间），就会触发焦点抢夺，引发闪烁和Tab切换：

<Searchbar
  inputMode="numeric"
  ref={inputref}
  style={{ borderRadius: 5, padding: 10, fontSize: 25 }}
  onChangeText={(text) => {
    searchHandler(text);
    setLoadingbar(true);
  }}
  // 移除这一行：onBlur={() => inputref.current?.focus()}
  placeholder="Enter Number feed"
  value={setSearchValues}
  maxLength={10}
/>

优化自动聚焦与键盘类型问题 #

针对两个Tab输入框autoFocus导致的键盘切换问题，做以下调整：

1. 精准控制聚焦时机：不要直接给输入框设autoFocus={true}，而是在Tab切换到当前页面时，通过导航的focus事件触发聚焦，避免Tab未激活时输入框也尝试聚焦：

   // 在每个Tab页面的组件中
   useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
       inputref.current?.focus();
     });
     return unsubscribe;
   }, [navigation]);
   

   同时移除输入框上的autoFocus属性。

2. 直接指定数字键盘：使用keyboardType="numeric"替代inputMode="numeric"（React Native原生属性兼容性更好），避免键盘先显示字母数字再切换：

   <Searchbar
     keyboardType="numeric" // 替换inputMode
     // 其他属性...
   />
   

   原生TextInput同样设置keyboardType="numeric"即可。

额外优化：避免未激活Tab的焦点干扰 #

Material Top Bar Navigation默认会预加载相邻Tab的组件，导致未激活的Tab输入框也会尝试获取焦点。可以通过导航的isFocused状态控制输入框的聚焦逻辑：

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

// 在Tab页面组件内
const isFocused = useIsFocused();

useEffect(() => {
  if (isFocused) {
    inputref.current?.focus();
  } else {
    inputref.current?.blur(); // 切换Tab时主动失焦当前输入框
  }
}, [isFocused]);

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