React Navigation材质标签导航搭配使用iOS键盘无法唤起问题

• 运行环境：iOS端（iPhone 8测试），依赖版本为react-navigation/native@5.9.4、createMaterialBottomTabNavigator@5.3.15、createMaterialTopTabNavigator@5.3.15
• 异常现象：两个导航组件嵌套使用时，点击输入框后键盘要么无法唤起，要么唤起后立刻关闭，输入框完全无法使用；安卓端无此问题，移除createMaterialTopTabNavigator嵌套后问题消失，可确认是两个组件搭配触发的冲突bug。
• 验证逻辑：可通过以下代码片段注释切换嵌套场景验证问题：

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator>
      {/*
      <Tab.Screen
        name="GymTopTab"
        component={GymTopTabNavigator}
        options={{
          tabBarLabel: "Séances",
        }}
      />
      */}
      <Tab.Screen
        name="TrainingStack"
        component={TrainingStackNavigator}
        options={{
          tabBarLabel: "Séances",
        }}
      />
    </Tab.Navigator>
  )
}

方案1：调整Material顶部导航配置 #

在createMaterialTopTabNavigator的Tab.Navigator配置项中关闭动画和懒加载逻辑，避免键盘唤起时父容器重绘导致输入框失焦：

<Tab.Navigator
  animationEnabled={false}
  lazy={false}
  // 其余原有配置保持不变
>
  {/* 原有Screen子项 */}
</Tab.Navigator>

该方案改动最小，可覆盖绝大多数该场景的冲突问题。

方案2：关闭底部导航的键盘隐藏逻辑 #

两个Material导航的键盘管理逻辑存在冲突，可在createMaterialBottomTabNavigator的配置中强制关闭底部栏随键盘自动隐藏的逻辑：

<Tab.Navigator
  tabBarOptions={{
    keyboardHidesTabBar: false
  }}
  // 其余原有配置保持不变
>
  {/* 原有Screen子项 */}
</Tab.Navigator>

方案3：给输入框所在滚动容器添加适配属性 #

如果输入框放在ScrollView、FlatList等滚动容器内，给容器添加keyboardShouldPersistTaps="handled"属性，避免触摸事件被父容器拦截导致输入框失焦：

<ScrollView keyboardShouldPersistTaps="handled">
  {/* 页面内容、输入框等 */}
</ScrollView>

方案4：替换底部导航组件 #

如果不需要Material Design风格底部导航的专属动效，可将createMaterialBottomTabNavigator替换为@react-navigation/bottom-tabs提供的标准底部导航组件，两者API基本兼容，修改成本极低，可彻底避免该类适配冲突。

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