React Navigation 6 Deeplink跳转时同步设置底栏Tab与栈路由页面问题

这个需求可以实现，核心是要让Deeplink触发的导航状态同时包含「底栏选中指定Tab」和「栈导航打开目标页面」两层结构。你之前的配置不生效是因为initialRouteName仅支持传入字符串类型的路由名，无法直接定义嵌套路由的初始状态，正确实现方式如下：

推荐使用自定义导航状态解析的方案，这是最稳定且符合React Navigation设计规范的实现：

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

const linking = {
  prefixes: ['你的应用自定义Scheme，比如myapp://'],
  config: {
    screens: {
      [RouteNames.mainStackNav]: {
        screens: {
          [RouteNames.settings]: 'settings' // 对应deeplink路径 myapp://settings
        }
      }
    }
  },
  // 自定义解析deeplink生成导航状态
  getStateFromPath: (path, options) => {
    // 先调用官方默认方法拿到基础匹配状态
    const defaultState = getStateFromPath(path, options);
    if (!defaultState) return defaultState;

    // 判断当前deeplink是否匹配到mainStack下的页面
    const matchMainStack = defaultState.routes.some(
      route => route.name === RouteNames.mainStackNav
    );

    if (matchMainStack) {
      // 构造完整导航状态，满足你的需求
      return {
        ...defaultState,
        // 根栈路由顺序：先加载底栏导航，再加载目标栈页面
        routes: [
          {
            name: RouteNames.bottomTabNav,
            // 指定底栏默认选中Profile页
            state: {
              routes: [{ name: RouteNames.profile }],
              index: 0
            }
          },
          // 保留默认匹配到的mainStack路由
          ...defaultState.routes
        ],
        // 根栈当前显示顶层的mainStack页面
        index: 1
      };
    }

    return defaultState;
  }
};

逻辑说明 #

• 当检测到Deeplink要打开mainStackNav下的页面时，会主动把底栏导航放到根路由栈的底层，同时指定底栏的选中Tab为Profile
• 当用户关闭mainStackNav的页面返回时，底栏会停留在Profile页，完全符合预期效果
• 无需额外监听跳转事件，不会出现跳转时序错误导致的闪屏问题

如果你的mainStackNav是全局通用的浮层栈，不需要保留返回到底栏的场景，也可以在NavigationContainer的onStateChange回调中监听deeplink跳转事件，跳转后手动调用navigation.navigate(RouteNames.bottomTabNav, { screen: RouteNames.profile })修改底栏选中状态，但该方案容易出现时序问题，不推荐。

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