javascript - 如何在底部标签导航器中隐藏标签栏，React Native 6x

Question

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

这是我的导航文件：

应用导航器.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，因为我在我的应用程序中使用它，我只需要隐藏这个标签栏。

标签： javascriptreactjsreact-nativereact-navigationstack-navigator

Answer 1

在反应原生navigati6.x上你必须使用tabBarStyle: { display: 'none' }

切换标签栏