React Native如何阻止自定义底部Tab Bar被虚拟键盘顶起

问题核心原因 #

tabBarHideOnKeyboard是React Navigation为官方默认Tab Bar内置的适配逻辑，当传入自定义组件作为Tab Bar时，框架不会自动注入键盘状态监听、显隐控制的相关逻辑，因此该配置对自定义Tab Bar无效。

方案1：键盘弹出时隐藏Tab Bar（对齐官方默认效果） #

在自定义NavBar组件内手动监听键盘事件，控制组件显隐即可，实现效果和官方配置完全一致：

import { View, Keyboard, Platform } from 'react-native';
import { useEffect, useState } from 'react';

const NavBar = (props) => {
  const [keyboardVisible, setKeyboardVisible] = useState(false);

  useEffect(() => {
    const showEvent = Platform.OS === 'android' ? 'keyboardDidShow' : 'keyboardWillShow';
    const hideEvent = Platform.OS === 'android' ? 'keyboardDidHide' : 'keyboardWillHide';
    
    const showSub = Keyboard.addListener(showEvent, () => setKeyboardVisible(true));
    const hideSub = Keyboard.addListener(hideEvent, () => setKeyboardVisible(false));

    return () => {
      showSub.remove();
      hideSub.remove();
    };
  }, []);

  // 键盘弹出时直接不渲染Tab Bar
  if (keyboardVisible) return null;

  return (
    <View>
      {/* 原有NavBar的业务内容 */}
    </View>
  );
};

export default NavBar;

安卓端选用keyboardDidShow/keyboardDidHide事件，是因为安卓平台没有键盘弹出/收起的前置触发事件，用Did系列事件可以避免动画闪烁。

方案2：保留Tab Bar显示，固定在底部不被顶起 #

如果不需要键盘弹出时隐藏Tab Bar，只需要阻止Tab Bar跟随键盘上移，按以下步骤配置即可：

• 修改安卓软键盘模式
  打开安卓项目路径下的android/app/src/main/AndroidManifest.xml，找到主Activity的配置项，将android:windowSoftInputMode的值改为adjustPan：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustPan"
  <!-- 其余原有配置保持不变 -->
>

• 给自定义Tab Bar加固定定位
  修改NavBar组件最外层容器样式，用绝对定位固定在底部：

const NavBar = (props) => {
  return (
    <View style={{
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      // 原有自定义样式，比如高度、背景色、边框、阴影等
    }}>
      {/* 原有NavBar的业务内容 */}
    </View>
  );
};

iOS端不需要修改原生配置，仅添加上述绝对定位样式即可实现固定底部的效果，iOS默认键盘弹出逻辑不会偏移绝对定位在屏幕底部的元素。

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