如果用户未在基于新的 expo 文件的路由器中登录，有条件地呈现注册页面的最佳方法是什么？

Question

我希望应用程序在用户未登录的情况下呈现注册页面。但现在的问题是，当应用程序加载时，它会加载堆栈屏幕，但会与抽屉屏幕具有相同的内容和布局。这意味着，注册页面永远不会被加载。在我的 DataContext 中，我故意为用户设置了一个布尔值并将其设置为 false，以便加载注册页面，但它仍然加载堆栈，但带有抽屉屏幕。我必须将用户更改为 true，然后再更改回 false，以便现在加载注册页面。我不太熟悉基于新的 expo 文件的路由器以及堆栈、抽屉和插槽。所以我需要帮助。

    import {
    DarkTheme,
    DefaultTheme,
    ThemeProvider,
    } from "@react-navigation/native";
    import { useFonts } from "expo-font";
    import { useRouter, useFocusEffect, Stack } from "expo-router";
    import * as SplashScreen from "expo-splash-screen";
    import { useEffect, useCallback, useContext, useState } from "react";
    import "react-native-reanimated";
    import { useColorScheme } from "@/hooks/useColorScheme";
    import { GestureHandlerRootView } from "react-native-gesture-handler";
    import { Drawer } from "expo-router/drawer";
    import DataProvider, { DataContext } from "@/dataContext/DataContext";
    import { MaterialIcons } from "@expo/vector-icons";
    import { getFocusedRouteNameFromRoute } from "@react-navigation/native";

    // Prevent the splash screen from auto-hiding before asset loading is complete.
    SplashScreen.preventAutoHideAsync();

    function AunthenticatedDrawer() {
    const colorScheme = useColorScheme();
    const router = useRouter();

    const updateHeaderTitle = useCallback((navigation, route) => {
        useFocusEffect(
            useCallback(() => {
                const routeName = getFocusedRouteNameFromRoute(route) ?? "Home";
                let title = "";
                switch (routeName) {
                    case "index":
                        title = "Questions";
                        break;
                    case "myCourses":
                        title = "My Courses";
                        break;
                    case "inbox":
                        title = "Messages";
                        break;
                    case "creator":
                        title = "Create";
                        break;
                    case "profile":
                        title = "Profile";
                        break;

                    default:
                        break;
                }
                navigation.setOptions({ title: title });
            }, [navigation, route])
        );
    }, []);

    return (
        <Drawer
            screenOptions={{
                headerTintColor: colorScheme === "dark" ? "white" : "black",
                headerRight: () => (
                    <MaterialIcons
                        name="notifications"
                        color={colorScheme === "dark" ? "white" : "black"}
                        size={23}
                        onPress={() => router.push("/notifications")}
                    />
                ),
            }}
        >
            <Drawer.Screen
                name="authenticated/(tabs)"
                options={({ navigation, route }) => {
                    updateHeaderTitle(navigation, route);
                    return { drawerLabel: "Home", title: "" };
                }}
            />
            <Drawer.Screen
                name="authenticated/question/[id]"
                options={{
                    drawerLabel: "Question",
                    drawerItemStyle: { display: "none" },
                    title: "",
                }}
            />
            <Drawer.Screen
                name="authenticated/notifications"
                options={{ drawerLabel: "Notifications" }}
            />
            <Drawer.Screen
                name="+not-found"
                options={{ drawerItemStyle: { display: "none" } }}
            />
            <Drawer.Screen
                name="authenticated/report/[id]"
                options={{
                    title: "Report",
                    drawerItemStyle: { display: "none" },
                }}
            />
        </Drawer>
    );
    }

    function UnAuthenticatedStack() {
    return (
        <Stack
            screenOptions={{ headerShown: false }}
            initialRouteName="unauthenticated/signup"
        >
            <Stack.Screen name="unauthenticated/signup" />
        </Stack>
    );
    }

    function RootLayout() {
    const colorScheme = useColorScheme();
    const [loaded] = useFonts({
        SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
    });
    const { user } = useContext(DataContext);
    useEffect(() => {
        if (loaded) {
            SplashScreen.hideAsync();
        }
    }, [loaded]);

    if (!loaded) {
        return null;
    }

    return (
        <ThemeProvider
            value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
        >
            <GestureHandlerRootView style={{ flex: 1 }}>
                {user ? <AunthenticatedDrawer /> : <UnAuthenticatedStack />}
            </GestureHandlerRootView>
        </ThemeProvider>
    );
    }

    export default function AppLayout() {
    return (
        <DataProvider>
            <RootLayout />
        </DataProvider>
    );
    }

Answer 1

您可以自定义启动画面，然后使用 setTimeout 来显示您想要的页面。您可以在 setTimeout 函数中使用条件。如果用户未登录，则打开注册页面，否则打开主页。

const [loggedIn, setLoggedIn] = useState(true);
setTimeout(() => {
  if(loggedIn){
    navigation.navigate('screenWithDrawer')
  }else{
    navigation.navigate('home')
  }     
}, 3000);