在React Native expo文件路由器中设置初始路由

Question

我正在尝试在我的 React Native 应用程序中设置初始路线。当我使用“npx create-expo-app@latest”创建应用程序时，该应用程序是使用一些模板页面构建的。 我已经创建了一个入门页面，我希望该应用程序在该屏幕上打开。

这是 onboarding.tsx

import React from "react";
import { View, Text, Button } from "react-native";
import { useRouter } from "expo-router";

export default function Onboarding() {
    const router = useRouter();

    const finishOnboarding = () => {
        router.replace("/");
    };

    return (
        <View
            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>Welcome to the app!</Text>
            <Button title="Get Started" onPress={finishOnboarding} />
        </View>
    );
}

这是应用程序/_layout.tsx：

import {
    DarkTheme,
    DefaultTheme,
    ThemeProvider,
} from "@react-navigation/native";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { useEffect } from "react";
import "react-native-reanimated";

import Onboarding from "./onboarding";

import { useColorScheme } from "@/hooks/useColorScheme";

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
    const colorScheme = useColorScheme();
    const [loaded] = useFonts({
        SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
    });

    useEffect(() => {
        if (loaded) {
            SplashScreen.hideAsync();
        }
    }, [loaded]);

    if (!loaded) {
        return null;
    }

    return (
        <ThemeProvider
            value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
            <Stack initialRouteName="/onboarding">
                <Stack.Screen
                    name="onboarding"
                    options={{ headerShown: false }}
                />
                <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
                <Stack.Screen name="+not-found" />
            </Stack>
        </ThemeProvider>
    );
}

应用程序仍在选项卡页面上打开。为什么是这样？如何在 onboarding.tsx 上打开应用程序？

文件路由器结构是这样的：

app
/(tabs)
       /_layout.tsx
       /explore.tsx
       /index.tsx
/_layout.tsx
/onboarding.tsx
/+html.tsx
/+not-found.tsx

Answer 1

我也面临这个问题。我猜，这是一个博览会路由器错误。您可以简单地使用您的index.tsx页面进行重定向。

// app/index.tsx
import { Redirect } from "expo-router";

export default function IndexPage () {
    return <Redirect href="/onboarding" />;
};