React-Navigation Stack Navigator无navigation prop时如何条件调整页面顺序

你当前的问题根源是用了条件切换根导航器的写法，isSignIn状态变更后会直接销毁原有Root导航树、替换为Main导航树，页面栈会完全重置，自然无法保留登录前的页面。具体修改方案如下：

1. 重构根导航结构，合并导航栈 #

不要拆分<Main/>和<Root/>两个独立导航器，把所有页面都放到同一个根Stack Navigator下，认证相关页面（登录、引导页）作为普通页面加入栈即可：

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

function RootNavigator() {
  // 从全局状态/本地存储读取登录状态和跳过标识
  const { isSignIn, skippedAuth } = useAuthState();

  return (
    <Stack.Navigator>
      {/* 公共页面，无需登录即可访问 */}
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="AuthGuide" component={AuthGuideScreen} />
      <Stack.Screen name="Login" component={LoginScreen} />
      {/* 需登录才能访问的页面，通过条件渲染控制可见性 */}
      {isSignIn ? (
        <>
          <Stack.Screen name="UserCenter" component={UserCenterScreen} />
          <Stack.Screen name="OrderList" component={OrderListScreen} />
        </>
      ) : null}
    </Stack.Navigator>
  )
}

2. 配置启动初始路由，满足跳过直接进Home的需求 #

通过initialRouteName配置APP启动时的默认进入页面，对应第一个场景：

// 写在RootNavigator内部
const getInitialRoute = () => {
  if (isSignIn || skippedAuth) return 'Home';
  return 'AuthGuide';
}

// Stack.Navigator加上初始路由配置
<Stack.Navigator initialRouteName={getInitialRoute()}>
  {/* 页面配置不变 */}
</Stack.Navigator>

3. 修改登录完成的跳转逻辑，保留页面栈 #

登录页完成登录逻辑后，不需要重置导航，直接调用navigation.goBack()就会返回登录前打开的页面，对应第二个场景。如果需要刷新前序页面的登录态相关数据，可以通过全局状态、路由回调参数等方式触发刷新即可。

4. 适配Auth引导页跳过逻辑 #

用户在Auth引导页点击「跳过」时，把skippedAuth标识持久化到本地存储，然后调用navigation.replace('Home')即可，下次启动APP时会自动识别标识直接进入Home页。

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