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

Question

我的应用程序 Bottom Tab Navigator 版本为 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

App.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

在 React Native navigati6.x 上你必须使用 tabBarStyle: { display: 'none' }

Toggle tab bar

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

How to hide a tab bar in bottom tabs navigator, React Native 6x

javascript

reactjs

react-native

react-navigation

stack-navigator