React Navigation 6使用自定义tab bar时如何隐藏底部标签栏

自定义标签栏下指定页面隐藏标签栏的实现 #

React Navigation 6 已经废弃了原有的tabBarVisible属性，自定义标签栏时可以通过路由状态判断是否需要渲染标签栏，实现方式如下：

1. 在Tab.Navigator的tabBar回调参数中拿到当前路由状态，获取当前活跃的页面名称
2. 配置需要隐藏标签栏的页面名单，匹配时直接返回null跳过渲染

示例代码：

<Tab.Navigator
  tabBar={(props) => {
    // 获取当前活跃的路由名称
    const currentRoute = props.state.routes[props.state.index];
    // 配置需要隐藏标签栏的页面列表
    const hideRoutes = ['详情页', '编辑页', '搜索结果页'];
    // 匹配到隐藏名单则不渲染标签栏
    if (hideRoutes.includes(currentRoute.name)) return null;
    // 正常渲染自定义标签栏
    return <CustomTabBar {...props} />
  }}
>
  {/* 此处为你的Tab页面配置 */}
</Tab.Navigator>

如果存在Stack嵌套Tab的嵌套路由场景，需要递归获取最内层的路由名称再做匹配

键盘唤起时隐藏自定义标签栏的实现 #

tabBarHideOnKeyboard属性仅对React Navigation官方默认的底部标签栏生效，自定义标签栏需要自行监听键盘状态来控制渲染，实现方式如下：

1. 在自定义标签栏组件内部监听键盘的显示/隐藏事件，维护键盘状态
2. 键盘显示时直接返回null不渲染标签栏即可

示例代码：

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

const CustomTabBar = (props) => {
  const [keyboardShow, setKeyboardShow] = useState(false);

  useEffect(() => {
    // 注册键盘显示监听
    const showListener = Keyboard.addListener('keyboardDidShow', () => setKeyboardShow(true));
    // 注册键盘隐藏监听
    const hideListener = Keyboard.addListener('keyboardDidHide', () => setKeyboardShow(false));

    // 组件卸载时移除监听避免内存泄漏
    return () => {
      showListener.remove();
      hideListener.remove();
    }
  }, []);

  // 键盘显示时不渲染标签栏
  if (keyboardShow) return null;

  // 原有自定义标签栏的渲染逻辑
  return (
    <View style={{ height: 60, flexDirection: 'row', justifyContent: 'space-around' }}>
      {/* 标签栏项渲染逻辑 */}
    </View>
  )
}

• 安卓端如果出现键盘事件不触发的情况，可以检查AndroidManifest.xml中对应Activity的windowSoftInputMode配置，设置为adjustResize即可

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