Expo Router嵌套路由问题：无法识别(onboarding)路由及首屏未渲染

问题原因 #

1. 路由引用错误：(onboarding)是Expo Router的路由分组文件夹，并非可直接导航的屏幕组件。你在根布局app/_layout.tsx里将其作为Stack.Screen的name属性，Expo Router找不到对应路由文件，因此抛出警告。
2. 首屏未配置入口：未明确设置App启动时的初始路由，导致框架不知道该渲染哪个引导页屏幕。

修复步骤 #

1. 修正根布局 app/_layout.tsx #

移除对(onboarding)的错误引用，改为设置全局初始路由指向引导页首屏：

import React from "react";
import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack initialRouteName="(onboarding)/LandingPageScreen">
      {/* Expo Router会自动识别所有路由，无需手动声明分组 */}
    </Stack>
  );
}

2. 配置引导页分组的初始路由 app/(onboarding)/_layout.tsx #

在分组布局里指定默认显示的首屏，确保进入引导页组时自动渲染LandingPageScreen：

import React from "react";
import { Stack } from "expo-router";

export default function OnboardingStackLayout() {
  return (
    <Stack initialRouteName="LandingPageScreen">
      <Stack.Screen name="LandingPageScreen" options={{ headerShown: false }} />
      <Stack.Screen name="LoginSignupScreen" options={{ headerShown: false }} />
      <Stack.Screen name="LoginScreen" options={{ headerShown: false }} />
      <Stack.Screen
        name="PhoneVerificationScreen"
        options={{ headerShown: false }}
      />
    </Stack>
  );
}

3. 确保屏幕组件默认导出 #

检查LandingPageScreen.tsx等所有引导页组件，必须使用默认导出，否则Expo Router无法识别：

// app/(onboarding)/LandingPageScreen.tsx
import React from "react";
import { View, Text, StyleSheet } from "react-native";

// 必须用export default
export default function LandingPageScreen() {
  return (
    <View style={styles.container}>
      <Text>欢迎来到引导页</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

4. 重启Metro打包器 #

执行以下命令清除缓存并重启，确保路由配置生效：

npx expo start --clear

额外说明 #

• Expo Router中，带括号的文件夹是路由分组，用于组织路由结构，不会影响URL（Web端）或Native端的导航层级，但本身不是可访问的路由。
• 所有可导航的路由都对应具体的.tsx屏幕文件，布局文件_layout.tsx仅用于定义该路由组的导航容器（如Stack、Tabs）。

内容的提问来源于stack exchange，提问作者FullCircle