React Navigation - 試圖在某些屏幕上隱藏標簽欄

Question

我試圖隱藏第一個屏幕上的標簽欄，但我所做的一切似乎都不起作用。 如果我重新渲染屏幕然后它就會消失，但每次我再次加載應用程序時它都會在那里。 在線查看后，我發現了一些解決方法，它可以隱藏我希望它隱藏的屏幕上的選項卡欄，除了StartScreen之外的所有內容。 請有人告訴我我需要做什么才能將它隱藏在StartScreen上嗎？ 謝謝你。

import React from "react";
import {
    NavigationContainer,
    getFocusedRouteNameFromRoute,
} from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";

import StartScreen from "../screens/StartScreen";
import LoginScreen from "../screens/LoginScreen";
import SignupScreen from "../screens/SignupScreen";
import FindPropertyScreen from "../screens/FindPropertyScreen";
import FindAddressManuallyScreen from "../screens/FindAddressManuallyScreen";
import PropertyDetailsScreen from "../screens/PropertyDetailsScreen";
import DashboardScreen from "../screens/DashboardScreen";
import HomeReviewScreen from "../screens/HomeReviewScreen";
import ContractorScreen from "../screens/ContractorScreen";
import TestScreen from "../screens/TestScreen";
import FinanceScreen from "../screens/FinanceScreen";


export default function Navigator() {

    const HomeStack = createStackNavigator();

    const HomeStackScreen = ({ navigation, route }) => {
        // Screens where Bottom Tabs need to be hidden
        const tabHiddenRoutes = [
            "StartScreen",
            "LoginScreen",
            "SignupScreen",
            "FindPropertyScreen",
            "FindAddressManuallyScreen",
            "PropertyDetailsScreen",
        ];

        React.useLayoutEffect(() => {
            const routeName = getFocusedRouteNameFromRoute(route);
            if (tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))) {
                navigation.setOptions({ tabBarStyle: { display: "none" } });
            } else {
                navigation.setOptions({ tabBarStyle: { display: "flex" } });
            }
        }, [navigation, route]);
        return (
            <HomeStack.Navigator>
                <HomeStack.Screen
                    name="StartScreen"
                    component={StartScreen}
                    options={{
                        title: "",
                        headerStyle: {
                            backgroundColor: "#0061FC",
                        },
                        headerTintColor: "#fff",
                        headerShadowVisible: false,
                    }}
                />
                <HomeStack.Screen
                    name="LoginScreen"
                    component={LoginScreen}
                    options={{
                        title: "Login",
                        cardStyle: {
                            backgroundColor: "#fff",
                        },
                    }}
                />
                <HomeStack.Screen
                    name="SignupScreen"
                    component={SignupScreen}
                    options={{
                        title: "Welcome",
                        cardStyle: {
                            backgroundColor: "#fff",
                        },
                    }}
                />
                <HomeStack.Screen
                    name="FindPropertyScreen"
                    component={FindPropertyScreen}
                    options={{
                        title: "",
                        headerStyle: {
                            backgroundColor: "#0061FC",
                        },
                        headerTintColor: "#fff",
                        headerShadowVisible: false,
                    }}
                />
                <HomeStack.Screen
                    name="FindAddressManuallyScreen"
                    component={FindAddressManuallyScreen}
                    options={{
                        title: "Enter address",
                        cardStyle: {
                            backgroundColor: "#fff",
                        },
                    }}
                />
                <HomeStack.Screen
                    name="PropertyDetailsScreen"
                    component={PropertyDetailsScreen}
                    options={{
                        title: "Property Details",
                        cardStyle: {
                            backgroundColor: "#fff",
                        },
                    }}
                />
                <HomeStack.Screen
                    name="DashboardScreen"
                    component={DashboardScreen}
                    options={{
                        title: "Your Dashboard",
                        cardStyle: {
                            backgroundColor: "#fff",
                        },
                    }}
                />
                <HomeStack.Screen
                    name="TestScreen"
                    component={TestScreen}
                    options={{
                        title: "Test Screen",
                        cardStyle: {
                            backgroundColor: "#fff",
                        },
                    }}
                />
            </HomeStack.Navigator>
        );
    };

    const DashboardStack = createStackNavigator();

    function DashboardStackScreen() {
        return (
            <DashboardStack.Navigator>
                <DashboardStack.Screen
                    name="HomeReviewScreen"
                    component={HomeReviewScreen}
                    options={{
                        title: "",
                        cardStyle: {
                            backgroundColor: "#fff",
                        },
                        headerTintColor: "#fff",
                        headerShadowVisible: false,
                    }}
                />
            </DashboardStack.Navigator>
        );
    }

    const Tab = createBottomTabNavigator();

    return (
        
            <NavigationContainer>
                <Tab.Navigator
                    screenOptions={({ route }) => ({
                        headerShown: false,
                        tabBarIcon: ({ focused, color, size }) => {
                            if (route.name === "Home") {
                                return (
                                    <Ionicons
                                        name={focused ? "home" : "home-outline"}
                                        size={size}
                                        color={color}
                                    />
                                );
                            } else if (route.name === "Dashboard") {
                                return (
                                    <Ionicons
                                        name={focused ? "settings" : "settings-outline"}
                                        size={size}
                                        color={color}
                                    />
                                );
                            } else if (route.name === "Finance") {
                                return (
                                    <Ionicons
                                        name={focused ? "card" : "card-outline"}
                                        size={size}
                                        color={color}
                                    />
                                );
                            } else if (route.name === "Contractor") {
                                return (
                                    <Ionicons
                                        name={focused ? "build" : "build-outline"}
                                        size={size}
                                        color={color}
                                    />
                                );
                            }
                        },
                        tabBarInactiveTintColor: "gray",
                        tabBarActiveTintColor: "#0061FC",
                        tabBarShowLabel: false,
                    })}
                >
                    <Tab.Screen
                        name="Home"
                        component={HomeStackScreen}
                        // options={({ route }) => ({
                        //  tabBarVisible: ((route) => {
                        //      const routeName = getFocusedRouteNameFromRoute(route) ?? "";

                        //      if (routeName === "StartScreen") {
                        //          return false;
                        //      }

                        //      return true;
                        //  })(route),
                        // })}
                    />
                    <Tab.Screen
                        name="Contractor"
                        component={ContractorScreen}
                        options={{
                            title: "",
                            cardStyle: {
                                backgroundColor: "#fff",
                            },
                        }}
                    />
                    <Tab.Screen name="Finance" component={FinanceScreen} />
                    <Tab.Screen name="Dashboard" component={DashboardStackScreen} />
                </Tab.Navigator>
            </NavigationContainer>
        
    );
}

Answer 1

你有沒有試過這個 rom 反應導航文檔：

實現此目的的最簡單方法是將選項卡導航器嵌套在堆棧的第一個屏幕內，而不是將堆棧嵌套在選項卡導航器內

Answer 2

解決方案 1) 對於您的情況：在useLayoutEffect中：

const routeName = getFocusedRouteNameFromRoute(route);

然后對於你需要的任何路線你可以做這樣的事情

navigation.getParent()?.setOptions({ tabBarStyle: { display: 'none' } });

或者

navigation.getParent()?.getParent()?.setOptions({ tabBarStyle: { display: 'none' } });

取決於包含選項卡欄的祖先級別。

只需確保在不需要更改的路線上應用display: flex 。

解決方案 2）如果只需要調整一個屏幕，則更優雅或更簡單的方法是在該目標屏幕中運行代碼，如下所述：

https://stackoverflow.com/a/70153935/1979861

Answer 3

我認為推薦的方法是為您的導航器設置一個 id

<Tab.Navigator ... id="NavID" />

然后使用導航器 ID

const tabNavigator = navigation.getParent('NavID')

tabNavigator.setOptions({ tabBarStyle: { display: "flex" } });