React Native Expo Router v3中initialRouteName不生效问题求助

问题原因 #

Expo Router 的 <Stack> 组件的 initialRouteName 是初始化属性，组件挂载后修改该值不会触发路由栈重新初始化。你的代码中，firstLoad 是异步获取的，Stack 组件可能已经先以默认的初始路由（通常是第一个定义的Screen）挂载，后续 firstLoad 变化无法改变已初始化的路由栈，导致首屏随机。

解决方案一：手动路由导航（推荐） #

使用 useRouter() 在确定 firstLoad 状态后手动跳转，绕过 initialRouteName 的限制：

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Stack, useRouter } from 'expo-router';
import SplashScreen from 'expo-splash-screen';

export default function RootLayout() {
  const router = useRouter();
  const [appReady, setAppReady] = useState(false);
  const [firstLoad, setFirstLoad] = useState<boolean | null>(null);

  useEffect(() => {
    const checkFirstLaunch = async () => {
      try {
        const firstLaunch = await AsyncStorage.getItem("isFirstLaunch");
        if (firstLaunch === null) {
          await AsyncStorage.setItem("isFirstLaunch", "false");
          setFirstLoad(true);
        } else {
          setFirstLoad(false);
        }
      } catch (e) {
        console.error(e);
        setFirstLoad(false); // 异常时默认进入主页面
      } finally {
        setAppReady(true);
      }
    };
    checkFirstLaunch();
  }, []);

  useEffect(() => {
    if (appReady && firstLoad !== null) {
      // 手动替换路由，确保首屏正确
      router.replace(firstLoad ? '/onboarding' : '/(tabs)');
      // 隐藏启动屏
      SplashScreen.hideAsync();
    }
  }, [appReady, firstLoad, router]);

  // 保持启动屏直到路由确定
  if (!appReady || firstLoad === null) {
    return null;
  }

  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="onboarding" options={{ headerShown: false }} />
    </Stack>
  );
}

解决方案二：条件渲染路由栈 #

在确定 firstLoad 后，渲染对应初始路由的 Stack 组件：

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Stack } from 'expo-router';
import SplashScreen from 'expo-splash-screen';

export default function RootLayout() {
  const [appReady, setAppReady] = useState(false);
  const [firstLoad, setFirstLoad] = useState<boolean | null>(null);

  useEffect(() => {
    const checkFirstLaunch = async () => {
      try {
        const firstLaunch = await AsyncStorage.getItem("isFirstLaunch");
        if (firstLaunch === null) {
          await AsyncStorage.setItem("isFirstLaunch", "false");
          setFirstLoad(true);
        } else {
          setFirstLoad(false);
        }
      } catch (e) {
        console.error(e);
        setFirstLoad(false);
      } finally {
        setAppReady(true);
      }
    };
    checkFirstLaunch();
  }, []);

  useEffect(() => {
    if (appReady && firstLoad !== null) {
      SplashScreen.hideAsync();
    }
  }, [appReady, firstLoad]);

  if (!appReady || firstLoad === null) {
    return null;
  }

  return firstLoad ? (
    <Stack initialRouteName="onboarding">
      <Stack.Screen name="onboarding" options={{ headerShown: false }} />
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  ) : (
    <Stack initialRouteName="(tabs)">
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="onboarding" options={{ headerShown: false }} />
    </Stack>
  );
}

关键优化点 #

• 将 firstLoad 初始值设为 null，避免初始默认值导致的提前渲染错误路由
• 异常捕获时默认进入主页面，防止应用卡住
• 确保启动屏在路由确定后再隐藏，避免闪屏

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