如何隐藏底部选项卡导航器中的选项卡栏，React Native 6x

Question

我的应用程序中有底部选项卡导航器版本 6x。我正在寻找如何将选项卡栏隐藏到我在应用程序中使用的屏幕之一的解决方案 - reviewDetail.js

这是我的导航文件：

AppNavigator.js

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from "react";

import about from "../screens/about";
import home from "../screens/home";
import reviewDetails from "../screens/reviewDetails";

const Tab = createBottomTabNavigator();

const AppNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen
      name="about"
      component={about}
      options={{
        title: "About",
      }}
    ></Tab.Screen>
    <Tab.Screen
      name="home"
      component={home}
      options={{
        title: "Home",
      }}
    ></Tab.Screen>
    <Tab.Screen name="reviewDetails" component={reviewDetails}></Tab.Screen>
  </Tab.Navigator>
);

export default AppNavigator;

这是我的app.js

应用程序.js

import React from "react";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import AppNavigator from "./navigation/AppNavigator";

export default function App() {
  return (
    <>
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    </>
  );
}

这是我所拥有的：

我想展示的内容：

我应该在代码中更改什么来隐藏“reviewDetails”选项卡栏？ 我仍然想导航到 reviewDetails 因为我在我的应用程序中使用它，我只需要隐藏这个选项卡栏。

Answer 1

如果您想隐藏堆栈中所有屏幕的底部选项卡。然后将下面给出的代码放置到该堆栈的第一个屏幕中。

//For hiding tab from a certain page
useLayoutEffect(() => {
    const hideUnsubscribe = navigation.addListener('focus', e => {
      let parentNav = props.navigation.getParent();
      parentNav.setOptions({
        tabBarStyle: {display: 'none'},
      });
    });
  }, []);

如果您想再次显示它，请将下面给出的代码放置到可以使用该选项卡的屏幕上。

//It will make the bottom tab visible
useLayoutEffect(() => {
    const hideUnsubscribe = navigation.addListener('focus', e => {
      let parentNav = props.navigation.getParent();
      parentNav.setOptions({
        tabBarStyle: {...tabBarStyle, display: 'flex'},
      });
    });

注意：这里的tabBarStyle是应用于标签栏的主要样式。您需要导出该样式才能在此处导入它。

Answer 2

在React Native navigati6.x上你必须使用

tabBarStyle: { display: 'none' }

切换标签栏

Answer 3

我不明白为什么正确答案被标记为隐藏整个tabBar：

tabBarStyle: { display: 'none' }

如果问题出在隐藏选项卡栏中的一项。

function AppNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name='about' component={about} />
      <Tab.Screen
        name='home'
        component={home}
        options={{ tabBarStyle: { display: 'none' } }} // Hide tabBar from the screan
      />
      <Tab.Screen
        name='reviewDetails'
        component={reviewDetails}
        options={{ tabBarItemStyle: { display: 'none' } }} // Hide item from tabBar
      />
    </Tab.Navigator>
  );
}