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