如何设置React Native Expo Stack中Welcome.tsx为应用启动默认页面？

你当前的代码已经设置了initialRouteName="Welcome"，但缺少关键的组件关联配置，导致应用无法正确加载Welcome页面。以下是完整的解决步骤：

关键问题修复 #

你的Stack.Screen组件没有指定component属性，Expo Router的Stack无法识别对应路由要渲染的组件。需要完成以下操作：

1. 导入Welcome组件
   在RootLayout文件顶部导入Welcome.tsx组件，路径根据实际项目结构调整：

import Welcome from './Welcome'; // 示例路径，按需修改

2. 给Welcome路由关联组件
   修改Welcome对应的Stack.Screen，添加component属性：

<Stack.Screen 
  name="Welcome" 
  component={Welcome}
  options={{headerShown: false}} 
/>

3. 关联其他路由组件
   同理，LoginScreen、Signup等其他路由也需要添加component属性，否则后续页面跳转也会失效。

修改后的完整RootLayout示例 #

import { ThemeProvider } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// 导入所有页面组件
import Welcome from './Welcome';
import LoginScreen from './LoginScreen';
import Signup from './Signup';
import Tabs from './(tabs)';
import NotFound from './+not-found';

const Stack = createNativeStackNavigator();

export default function RootLayout() {
  // 假设colorScheme已通过业务逻辑获取（比如useColorScheme）
  const colorScheme = 'light';

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

额外检查项 #

• 确保initialRouteName的值与目标路由的name完全一致（大小写敏感）
• 检查是否有全局初始化逻辑（比如用户登录状态检测）会自动跳转到其他页面，若有需调整逻辑，保证Welcome为默认启动页

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