如何无动画隐藏React Navigation底部导航栏？消除键盘弹出闪现

针对你使用react-navigation底部标签导航遇到的问题，提供两种解决方案：

一、彻底隐藏底部导航栏 #

如果不需要底部导航栏在任何场景显示，直接全局隐藏：

<Tab.Navigator
  screenOptions={{
    tabBarVisible: false, // 完全隐藏导航栏
    // 或者用tabBarStyle: { display: 'none' }
  }}
>
  {/* 你的页面组件 */}
</Tab.Navigator>

如果仅需在特定页面隐藏，在对应页面的options中配置：

<Tab.Screen
  name="YourScreen"
  component={YourComponent}
  options={{
    tabBarVisible: false,
  }}
/>

二、关闭显示/隐藏动画，解决短暂闪现问题 #

tabBarHideOnKeyboard: true默认带过渡动画，导致键盘弹出时导航栏短暂闪现，可通过以下方式禁用动画：

方法1：自定义底部导航栏组件，移除动画样式 #

import { BottomTabBar } from '@react-navigation/bottom-tabs';

const CustomTabBar = (props) => {
  return (
    <BottomTabBar
      {...props}
      style={{
        ...props.style,
        transitionProperty: 'none', // 禁用所有过渡动画
      }}
    />
  );
};

// 在导航器中使用自定义组件
<Tab.Navigator
  tabBar={(props) => <CustomTabBar {...props} />}
  screenOptions={{
    tabBarHideOnKeyboard: true,
  }}
>
  {/* 你的页面组件 */}
</Tab.Navigator>

方法2：手动监听键盘事件，无动画控制导航栏显示 #

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

const YourTabNavigator = () => {
  const [showTabBar, setShowTabBar] = useState(true);

  useEffect(() => {
    const keyboardShowListener = Keyboard.addListener('keyboardDidShow', () => {
      setShowTabBar(false);
    });
    const keyboardHideListener = Keyboard.addListener('keyboardDidHide', () => {
      setShowTabBar(true);
    });

    return () => {
      keyboardShowListener.remove();
      keyboardHideListener.remove();
    };
  }, []);

  return (
    <Tab.Navigator
      screenOptions={{
        tabBarVisible: showTabBar,
        tabBarStyle: {
          transitionProperty: 'none', // 确保无动画切换
        },
      }}
    >
      {/* 你的页面组件 */}
    </Tab.Navigator>
  );
};

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