react-navigation v6如何无延迟无动画跳转至其他栈的嵌套导航器

问题核心 #

从CreateOrderScreen跳转至OrderScreen时，因OrderNavigator是HomeNavigator的子导航器，当前跳转逻辑会先初始化HomeNavigator的默认页面HomeScreen，再跳转至目标页面，导致出现闪屏/延迟。

可行解决方案 #

方案1：使用CommonActions.reset直接重置导航状态

通过重置整个导航栈的状态，直接构建目标路由层级，完全跳过HomeScreen的初始化流程。

import { CommonActions } from '@react-navigation/native';

// 执行跳转
navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [
      {
        name: 'Root',
        state: {
          routes: [
            {
              name: 'Home',
              state: {
                routes: [
                  {
                    name: 'Order',
                    state: {
                      routes: [
                        {
                          name: 'OrderScreen',
                          params: {
                            id: 213090,
                            title: `test`,
                            state: OrderState.Confirmed,
                          },
                        },
                      ],
                    },
                  },
                ],
              },
            },
          ],
        },
      },
    ],
  })
);

原理：直接覆盖当前导航栈的状态，让Root -> Home -> Order -> OrderScreen成为唯一激活的路由链，不会触发HomeScreen的挂载。

方案2：动态配置HomeNavigator的初始路由

修改HomeNavigator的初始化逻辑，允许通过跳转参数指定初始路由为Order而非默认的HomeScreen。

1. 调整HomeNavigator的定义：

import { createStackNavigator } from '@react-navigation/stack';

const HomeStack = createStackNavigator();

const HomeNavigator = () => {
  return (
    <HomeStack.Navigator
      // 根据路由参数动态设置初始路由
      initialRouteName={({ route }) => route.params?.targetRoute || 'Home'}
    >
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Order" component={OrderNavigator} />
    </HomeStack.Navigator>
  );
};

2. 修改跳转代码：

navigation.navigate('Root', {
  screen: 'Home',
  params: {
    targetRoute: 'Order', // 指定HomeNavigator初始加载Order导航器
    screen: 'OrderScreen',
    params: {
      id: 213090,
      title: `test`,
      state: OrderState.Confirmed,
    },
  },
});

原理：让HomeNavigator初始化时直接加载Order子导航器，跳过HomeScreen的渲染流程。

方案3：调整导航层级（推荐，若业务允许）

将OrderNavigator从HomeNavigator中抽离，作为RootNavigator的同级导航器，从根源避免嵌套路由带来的初始页面加载问题。

1. 调整Root导航器结构：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const RootTab = createBottomTabNavigator();

const RootNavigator = () => {
  return (
    <RootTab.Navigator>
      <RootTab.Screen name="Home" component={HomeNavigator} />
      <RootTab.Screen name="Order" component={OrderNavigator} /> {/* 同级挂载 */}
    </RootTab.Navigator>
  );
};

2. 简化跳转代码：

navigation.navigate('Order', {
  screen: 'OrderScreen',
  params: {
    id: 213090,
    title: `test`,
    state: OrderState.Confirmed,
  },
});

原理：直接跳转至同级的OrderNavigator，无需经过HomeNavigator，自然不会加载HomeScreen。

为什么之前的方案无效？ #

• 移除动画：仅隐藏了页面过渡效果，但HomeScreen依然会被初始化挂载，因此仍存在延迟/闪屏。
• 使用replace/push：若未改变嵌套路由的层级逻辑，依然会触发HomeNavigator默认初始路由的加载流程。

特殊情况说明 #

当OrderScreen已挂载时，导航器仅会切换现有路由实例，不会重新初始化HomeScreen，因此符合无延迟无动画的预期，这也验证了问题根源在于初始路由的首次加载。

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