React Native使用react-navigation v6配置Deep Link参数返回undefined问题

问题原因 #

参数传递失败由两个核心配置不匹配问题导致：

• 唤起链接前缀与linking配置的prefixes字段不匹配：你配置的合法前缀是whitelabel://app，但测试用的唤起链接为app://profile/123，前缀不一致时react-navigation只会默认打开匹配的页面，不会解析路径参数。
• 路由名称与linking配置的screen key不匹配：从你提供的导航状态可以看到，个人页的路由名是Profile，但你在配置中写的screen key是ProfileScreen，两者必须完全一致才能完成参数映射。

修复方案 #

1. 修正linking配置的screen key #

将配置中的screen key替换为你实际定义的路由名Profile：

const config = {
  screens: {
    BottomNavigator: {
      screens: {
        ProfileNavigator: {
          screens: {
            // 此处key要和路由定义的name完全一致
            Profile: {
              path: 'profile/:id',
              parse: {
                id: (id) => `${id}`,
              },
              exact: true,
            },
          },
        },
        SearchNavigator: { screens: { SearchScreen: 'search/:id' } },
      },
    },
  },
};

2. 匹配前缀规则 #

两种方案二选一即可：

• 方案A：使用符合配置的测试链接，正确的测试地址为 whitelabel://app/profile/123
• 方案B：如果确实需要支持app://前缀唤起，修改prefixes配置：

const linking = {
  prefixes: ['whitelabel://app', 'app://'],
  config,
};

可选校验 #

如果修改后仍然无法获取参数，可以在应用入口添加监听代码确认链接解析情况：

import { Linking } from 'react-native';

Linking.addEventListener('url', (event) => {
  console.log('当前唤起链接：', event.url);
});

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