如何使用 React Navigation 隐藏 React Native 中特定屏幕上的底部标签栏？

Question

我正在开发一个 React Native 应用程序，使用 React Navigation 进行导航。我设置了一个底部选项卡导航器，用于在我的应用程序中的不同屏幕之间导航。但是，我遇到了一个问题，我不希望底部标签栏显示在“产品详细信息”屏幕上。

这是我的导航设置的简化版本：

// Imports
import React, { useEffect, useState } from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import {
  AntDesign,
  Entypo,
  EvilIcons,
  Feather,
  FontAwesome5,
  MaterialCommunityIcons,
  Octicons,
} from "@expo/vector-icons";
import AsyncStorage from "@react-native-async-storage/async-storage";

// Context
import { useLocation } from "../context/LocationContext";

// Components
import Header from "../components/Header";

// Screens
import Home from "../screens/Home";
import AllowLocation from "../screens/AllowLocation";
import SelectSignUpMethod from "../screens/OnBoarding/SelectSignUpMethod";
import Profile from "../screens/Tabs/Profile";
import Search from "../screens/Tabs/Search";
import Cart from "../screens/Tabs/Cart";
import CustomeDrawer from "../components/Drawer/CustomeDrawer";
import SignUpScreen from "../screens/OnBoarding/SignUpScreen";
import LogInScreen from "../screens/OnBoarding/LogInScreen";
import VerifyEmailScreen from "../screens/OnBoarding/VerifyEmailScreen";
import AddPhoneNumberScreen from "../screens/OnBoarding/AddPhoneNumberScreen";
import VerifyPhoneScreen from "../screens/OnBoarding/VerifyPhoneScreen";
import PinLocationScreen from "../screens/PinLocationScreen";
import SplashScreen from "../screens/SplashScreen";
import ChatScreens from "../screens/chat/ChatScreens";
import Help from "../screens/HelpCenter/Help";
import HelpDetails from "../screens/HelpCenter/HelpDetails";
import RestaurantScreen from "../screens/RestaurantScreen/RestaurantScreen";
import ProductDetail from "../screens/ProductDetails/ProductDetail";

// Context
import { useUser } from "../context/UserInfoContext";
import ChatHeader from "../screens/chat/chatHeader";

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const Stack = createNativeStackNavigator();

const HomeStack = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Main Home"
      component={Home}
      options={{ header: () => <Header /> }}
    />
    <Stack.Screen
      name="RestaurantScreen"
      component={RestaurantScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="ProductDetail"
      component={ProductDetail}
      options={{ headerShown: false }}
    />
  </Stack.Navigator>
);

const ProfileStack = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Main Profile"
      component={Profile}
      options={{ headerShown: false }}
    />
  </Stack.Navigator>
);

const CartStack = () => {
  return (
    <Stack.Navigator initialRouteName="Cart">
      <Stack.Screen
        name="Cart"
        component={Cart}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
};
const SearchStack = () => {
  <Stack.Navigator>
    <Stack.Screen
      name="Search"
      component={Search}
      options={{ headerShown: true }}
    />
  </Stack.Navigator>;
};

const TabNavigator = () => (
  <Tab.Navigator
    screenOptions={{
      tabBarStyle: {
        height: 57,
        backgroundColor: "#46B5A2",
        paddingTop: 10,
        
      },
      tabBarActiveTintColor: "#FFFFFF",
      tabBarInactiveTintColor: "#2A7D6E",
      tabBarLabel: "",
      header: () => <Header />,
    }}
  >
    <Tab.Screen
      name={"Home"}
      component={HomeStack}
      options={{
        tabBarIcon: ({ color, size }) => (
          <Octicons name="home" size={size} color={color} />
        ),
        headerShown: false,
      }}
    />
    <Tab.Screen
      name={"Cart"}
      component={CartStack}
      options={{
        tabBarIcon: ({ color, size }) => (
          <Feather name="shopping-bag" size={size} color={color} />
        ),
      }}
    />
    <Tab.Screen
      name={"Search"}
      component={SearchStack}
      options={{
        tabBarIcon: ({ color, size }) => (
          <Feather name="search" size={size} color={color} />
        ),
      }}
    />
    <Tab.Screen
      name={"Profile"}
      component={ProfileStack}
      options={{
        tabBarIcon: ({ color, size }) => (
          <AntDesign name="user" size={size} color={color} />
        ),
      }}
    />
  </Tab.Navigator>
);

const HelpStack = () => (
  <Stack.Navigator
    initialRouteName="Help"
    screenOptions={{
      headerShown: true,
      header: () => <ChatHeader />,
    }}
  >
    <Stack.Screen name="Help" component={Help} />
    <Stack.Screen name="HelpDetails" component={HelpDetails} />
  </Stack.Navigator>
);

// App Drawer Navigator
const AppDrawer = () => (
  <Drawer.Navigator
    drawerContent={(props) => <CustomeDrawer {...props} />}
    screenOptions={{
      headerShown: false,
      drawerStyle: {
        width: 330,
        borderTopRightRadius: 30,
        borderBottomRightRadius: 30,
      },
      drawerLabelStyle: {
        marginLeft: -20,
        fontFamily: "Gotham-Medium",
        fontSize: 13,
      },
      drawerItemStyle: {
        paddingVertical: 5,
        borderBottomWidth: 0.5,
        borderBottomColor: "#EFEFEF",
        paddingLeft: 5,
        borderRadius: 5,
      },
      drawerActiveBackgroundColor: "#46B5A2",
      drawerActiveTintColor: "#fff",
      // overlayColor: 'transparent',
    }}
  >
    <Drawer.Screen
      name="View Profile"
      component={TabNavigator}
      options={{
        drawerIcon: ({ size, color }) => (
          <FontAwesome5 name="user-circle" size={28} color={color} />
        ),
      }}
    />
    <Drawer.Screen
      name="Inbox"
      component={TabNavigator}
      options={{
        drawerIcon: ({ size, color }) => (
          <Feather name="inbox" size={28} color={color} />
        ),
      }}
    />
    <Drawer.Screen
      name="Addresses"
      component={TabNavigator}
      options={{
        drawerIcon: ({ size, color }) => (
          <Entypo name="address" size={28} color={color} />
        ),
      }}
    />
    <Drawer.Screen
      name="OrderReOrdering"
      component={TabNavigator}
      options={{
        title: "Orders & Re-Ordering",
        drawerIcon: ({ size, color }) => (
          <MaterialCommunityIcons
            name="text-box-check-outline"
            size={28}
            color={color}
          />
        ),
      }}
    />
    <Drawer.Screen
      name="Help Center"
      component={HelpStack}
      options={{
        drawerIcon: ({ size, color }) => (
          <Feather name="life-buoy" size={28} color={color} />
        ),
        headerShown: false,
        // header: () => <ChatHeader />,
      }}
    />

    <Drawer.Screen
      name="Setting"
      component={TabNavigator}
      options={{
        drawerIcon: ({ size, color }) => (
          <AntDesign name="setting" size={28} color={color} />
        ),
      }}
    />
    <Drawer.Screen
      name="ChatScreens"
      component={ChatScreens}
      options={{
        drawerIcon: ({ size, color }) => (
          <AntDesign name="setting" size={28} color={color} />
        ),
        headerShown: true,
        header: () => <ChatHeader />,
      }}
    />
  </Drawer.Navigator>
);

const OnBoardingStack = () => {
  const { user, setUserInfo, updateUserInfo, clearUserInfo } = useUser();

  let innitialRouteName = "SelectSignUpMethod";

  return (
    <Stack.Navigator
      initialRouteName={innitialRouteName} //Should change to "SelectSignUpMethod"
      screenOptions={{ headerShown: false, animation: "slide_from_bottom" }}
    >
      <Stack.Screen name={"SignUp"} component={SignUpScreen} />
      <Stack.Screen
        name={"SelectSignUpMethod"}
        component={SelectSignUpMethod}
      />
      <Stack.Screen name={"LogIn"} component={LogInScreen} />
      <Stack.Screen name={"VerifyEmail"} component={VerifyEmailScreen} />
      <Stack.Screen
        name={"PhoneNumberScreen"}
        component={AddPhoneNumberScreen}
      />
      <Stack.Screen name={"VerifyPhone"} component={VerifyPhoneScreen} />
    </Stack.Navigator>
  );
};

const LocationStack = () => (
  <Stack.Navigator initialRouteName={"AllowLocation"}>
    <Stack.Screen
      name={"AllowLocation"}
      component={AllowLocation}
      options={{
        headerShown: false,
      }}
    />
    <Stack.Screen
      name={"PinLocationScreen"}
      component={PinLocationScreen}
      options={{
        headerShown: false,
      }}
    />
  </Stack.Navigator>
);

const AppNavigation = () => {
  const { location, setLocation } = useLocation();
  const [isLogin, setIsLogin] = useState(true);

  const locationPermission = location.latitude !== null;

  return (
    <>
      {locationPermission === true ? (
        <>
          {isLogin ? (
            <>
              <AppDrawer />
            </>
          ) : (
            <>
              <OnBoardingStack />
            </>
          )}
        </>
      ) : (
        <>
          <LocationStack />
        </>
      )}
    </>
  );
};

export default AppNavigation;

如何隐藏“产品详细信息”屏幕上的底部标签栏，同时使其在应用程序的其他屏幕上保持可见？任何指导或建议将不胜感激。谢谢！

Answer 1

要隐藏特定选项卡上的底部栏，您可以这样做

  <Tab.Screen
    name="Product_Detail"
    component={Product Detail}
    options={{ tabBarStyle: { display: 'none' } }}
  />