React Navigation -试图隐藏某些屏幕上的标签栏

f2uvfpb9  于 2022-11-17  发布在  React
关注(0)|答案(2)|浏览(160)

我试着隐藏第一个屏幕上的标签栏,但我做的似乎都不起作用。如果我重新渲染屏幕,它就会消失,但每次我再次加载应用程序时,它都会在那里。在网上搜索后,我发现了一些变通办法,它可以隐藏屏幕上的标签栏,我想让它隐藏。除了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>
        
    );
}
mf98qq94

mf98qq941#

您是否已从react navigation doc中尝试此操作:
实现这一点的最简单方法是将制表符导航器嵌套在堆栈的第一个屏幕中,而不是将堆栈嵌套在制表符导航器中

avwztpqn

avwztpqn2#

解决方案1)对于您的案例:在useLayoutEffect中:

const routeName = getFocusedRouteNameFromRoute(route);

然后,对于任何您需要的路由,您可以执行以下操作
navigation.getParent()?.setOptions({ tabBarStyle: { display: 'none' } });

navigation.getParent()?.getParent()?.setOptions({ tabBarStyle: { display: 'none' } });
这取决于包含选项卡栏的祖先的级别。
只要确保您在那里为不需要更改的路由应用display: flex即可。
解决方案2)如果仅需要调整1个屏幕,则更优雅或更简单的方式将是在该目标屏幕中运行代码,如下所述:
https://stackoverflow.com/a/70153935/1979861

相关问题