React Navigation 6 iOS同时使用上下Material Tabs时键盘打开自动关闭问题

问题根因 #

该异常是react-navigation 6.x版本的已知兼容性问题：iOS端同时嵌套使用react-navigation/material-top-tabs与react-navigation/material-bottom-tabs时，两个导航器默认均开启了键盘状态监听，用于自动调整tab栏显隐与页面布局，重复的事件监听会触发非预期的页面重渲染，导致输入框瞬间失焦，键盘弹出后自动收起。Android系统的键盘事件分发逻辑与iOS存在差异，因此不会触发该问题。

修复方案 #

方案1：关闭单导航器的键盘适配（侵入性最低，推荐） #

在任意一个Tab导航器的配置项中添加keyboardHidesTabBar={false}，关闭其自带的键盘调整逻辑即可解决冲突，配置示例如下：

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
const BottomTab = createMaterialBottomTabNavigator();

function AppBottomTabs() {
  return (
    <BottomTab.Navigator
      keyboardHidesTabBar={false} // 新增该配置项
      {/* 其余原有配置保持不变 */}
    >
      {/* 原有screen路由配置 */}
    </BottomTab.Navigator>
  );
}

若需要保留键盘弹出时隐藏底部tab栏的交互，也可改为在material-top-tabs导航器配置中添加keyboardDismissMode="none"，关闭其键盘自动收起逻辑。

方案2：自定义键盘交互逻辑 #

如果需要同时保留两个导航器的原生交互特性，可先将两个导航器的自带键盘适配属性都设为关闭，再通过React Native官方KeyboardAPI自行监听键盘状态，手动调整页面布局与tab栏显隐，从根源避免事件冲突。

方案3：版本降级 #

若项目暂时不需要使用6.x版本的新增特性，可将所有react-navigation相关依赖统一降级到5.x版本，该版本不存在该兼容性问题，所有功能可正常运行。

内容的提问来源于stack exchange，提问作者Gaylord.P