如何將路由添加到我的 react 本機應用程序導航，但將其排除在我的選項卡導航之外？

Question

我已經看過教程並查看了文檔，但是我仍然不明白，我需要有人使用我的情況/代碼來解釋。

我的導航設置類似於 Instagram。 底部選項卡導航具有主頁/搜索/庫存/個人資料。

這是我的導航文件：

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { PresenceTransition, Text, View } from "native-base";
import Home from "../../screens/Home";
import Profile from "../../screens/Profile";
import InventoryIcon from "../svg/InventoryIcon";
import SearchIcon from "../svg/SearchIcon";
import UserIcon from "../svg/UserIcon";
import HomeIcon from "../svg/HomeIcon";
import Search from "../../screens/Search";
import Inventory from "../../screens/Inventory";
import authStore from "../../zustand/authStore";
import Login from "../../screens/Login/Login";
import { SafeAreaView } from "react-native-safe-area-context";
import { TouchableOpacity } from "react-native";
import userDataStore from "../../zustand/userDataStore";
import Avatar from "../Avatar";

const Tab = createBottomTabNavigator();

export default function BottomNavigation() {
  const currentUser = authStore((state) => state.currentUser);

  if (!currentUser)
    return (
      <SafeAreaView>
        <Login />
      </SafeAreaView>
    );

  return (
    <Tab.Navigator
      tabBar={(props) => <TabBar {...props} />}
      initialRouteName="Home"
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarStyle: {
          elevation: 0,
          borderTopWidth: 0,
          backgroundColor: "#2563eb",
        },
        tabBarShowLabel: false,
      })}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Search" component={Search} />
      <Tab.Screen name="Inventory" component={Inventory} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
}

function TabBar({ state, descriptors, navigation }) {
  const currentUser = authStore((state) => state.currentUser);
  const userData = userDataStore((state) => state.userData);
  return (
    <View className="bg-blue-600 py-4" style={{ flexDirection: "row" }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];

        const isFocused = state.index === index;

        let params;
        if (route.name === "Profile") {
          params = {
            uid: currentUser?.uid,
          };
        }
        const onPress = () => {
          const event = navigation.emit({
            type: "tabPress",
            target: route.key,
          });

          if (route.name === "Profile" && !event.defaultPrevented) {
            navigation.navigate(route.name, params);
            return;
          }

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name, params);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: "tabLongPress",
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}
          >
            <View className="relative flex w-full flex-1 items-center justify-center">
              <TabIcon
                currentUserProfilePicture={userData?.profilePicture}
                name={route.name}
              />
              <PresenceTransition
                visible={isFocused}
                initial={{ opacity: 0, scale: 0 }}
                animate={{
                  opacity: 1,
                  scale: 1,
                  transition: {
                    duration: 200,
                  },
                }}
                className="absolute -bottom-7 h-4 w-4 rounded-sm bg-white"
              />
            </View>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

function TabIcon({
  name,
  currentUserProfilePicture,
}: {
  name: string;
  currentUserProfilePicture: undefined | null | string;
}) {
  if (name === "Home") {
    return <HomeIcon svgClassName="text-white w-6 h-6" />;
  }
  if (name === "Search") {
    return <SearchIcon svgClassName="text-white w-6 h-6" />;
  }
  if (name === "Collections") {
    return <CollectionsIcon svgClassName="text-white w-6 h-6" />;
  }
  if (name === "Profile") {
    return currentUserProfilePicture ? (
      <Avatar
        url={currentUserProfilePicture}
        alt="Your profile"
        className="h-6 w-6"
      />
    ) : (
      <UserIcon svgClassName="text-white w-6 h-6" />
    );
  }
  return null;
}

現在，問題是我想添加一個Settings屏幕。 此屏幕不應位於底部選項卡欄中，只能從“ Profile ”屏幕導航到。 如果我將它添加到導航中，它會自動添加。

我可以做類似的事情：

const hiddenRoutes = ["Settings"]

if (hiddenRoutes.includes(route.name) {
   return;
}

但這對我來說似乎很hacky，我覺得它是錯誤的。

我應該如何最好地聲明路線，但將它們排除在底部標簽導航之外？

Answer 1

您將要為您的個人資料屏幕創建另一個導航層

要為配置文件屏幕進行堆棧導航：

const ProfileStack = createNativeStackNavigator<ProfileStackParamList>();
function ProfileNavigator() {
  return (
    <ProfileStack.Navigator >
      <ProfileStack.Screen
        name={"Profile"}
        component={Profile}
        options={() => ({
          title: "Profile",
        })}
      />
  <ProfileStack.Screen
    name={"Settings"}
    component={Settings}
    options={() => ({
      title: "Settings",
    })}
  />
</ProfileStack.Navigator>

); }

然后在您制作選項卡導航器的位置在組件中使用此堆棧導航

  <Tab.Screen name="Profile" component={ProfileNavigator} />