我如何添加路由到我的react native应用程序导航，但不让它在我的标签导航?

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;
}

但这对我来说似乎很粗俗，我觉得这是不对的。

我应该如何最好地声明路由，但不让它们出现在底部标签导航中?

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导航器的地方，在组件

中使用这个堆栈导航

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