React Navigation跨Stack深度/通用链接配置：需经列表页进详情页

问题背景 #

你的导航结构中，LoadDetails 和 TabsNavigator 同属 AppStack 栈导航器，需求是打开深度链接时，先进入 LoadListScreen，再自动跳转到对应 id 的 LoadDetails，且支持返回列表页。

步骤1：修正深度链接配置 #

首先调整 linking 的 config，将路径指向 TabsNavigator 下的 LoadListScreen，并正确解析参数（支持路径参数或查询参数，根据你的链接格式选择）：

如果你用路径参数（https://example.com/loadlist/XYZ）：

const linking = {
  prefixes: ['https://example.com'],
  config: {
    screens: {
      AppStack: {
        screens: {
          TabsNavigator: {
            screens: {
              LoadListScreen: {
                path: 'loadlist/:id',
                // 可选：确保参数为空时不报错
                parse: {
                  id: (id) => id || undefined,
                },
              },
              // 其他Tab页面配置...
            },
          },
          // 保留LoadDetails的单独配置（可选）
          LoadDetails: 'load-details/:id',
        },
      },
    },
  },
};

如果你用查询参数（https://example.com/loadlist?id=XYZ）：

const linking = {
  prefixes: ['https://example.com'],
  config: {
    screens: {
      AppStack: {
        screens: {
          TabsNavigator: {
            screens: {
              LoadListScreen: {
                path: 'loadlist',
                parse: {
                  id: (query) => query.id,
                },
              },
              // 其他Tab页面配置...
            },
          },
          LoadDetails: 'load-details/:id',
        },
      },
    },
  },
};

步骤2：在LoadListScreen中自动跳转详情页 #

在 LoadListScreen 组件中，监听路由参数，当存在 id 时，自动导航到 LoadDetails：

import React, { useEffect } from 'react';
import { useRoute, useNavigation } from '@react-navigation/native';

function LoadListScreen() {
  const route = useRoute();
  const navigation = useNavigation();

  useEffect(() => {
    // 检测到id参数时，跳转到详情页
    if (route.params?.id) {
      navigation.navigate('LoadDetails', { id: route.params.id });
    }
  }, [route.params, navigation]);

  // 你的列表页渲染逻辑...
  return (
    // 页面内容
  );
}

export default LoadListScreen;

原理说明 #

• 深度链接会先导航到 TabsNavigator 下的 LoadListScreen，此时底部Tab栏正常显示。
• LoadListScreen 检测到路由参数中的 id 后，调用 navigation.navigate 跳转到同属 AppStack 的 LoadDetails，此时Tab栏会自动隐藏（因为 LoadDetails 不在Tab导航器内）。
• 导航栈结构为 AppStack -> TabsNavigator(LoadListScreen) -> LoadDetails，用户点击返回按钮会回到 LoadListScreen，符合需求。

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