React Native Navigation 5 deep linking无法在栈导航内跳转如何解决

问题修复步骤 #

• 1. 统一链接前缀配置
  你当前配置的linking前缀为yenir://app，但测试跳转使用的链接为test://app，二者必须匹配。可直接将linking配置的prefixes修改为：

const linking = {
  prefixes: ["test://app"],
  config,
};

也可以后续测试时使用yenir://app/starter/profile/2作为跳转链接。

• 2. 调整deep link配置层级匹配路由结构
  你的实际路由层级为SwitchNavigator > Starter > 业务页面，config配置必须和路由层级完全对应才能正确匹配，修改后的config如下（该配置可直接匹配test://app/starter/profile/2链接）：

const config = {
  screens: {
    // 第一层匹配SwitchNavigator的Starter路由
    Starter: {
      path: "starter",
      // 第二层匹配Starter栈内的子页面
      screens: {
        Home: 'home',
        Profile: {
          path:"profile/:id",
          parse: {
            id: (id) => `${id}`
          },
        },
        Notifications: "notifications",
        Settings: "settings"
      }
    },
    // 若Auth、App路由也需要支持deep link，可在此处补充对应配置
  },
};

• 3. 修正栈路由的组件映射
  你当前Teststk栈内的4个Screen的component属性都指向同一个TestStack组件，会导致路由匹配成功后也无法渲染对应页面，请将每个Screen的component替换为对应的实际页面组件，例如：

<Testst.Screen name="Profile" component={ProfilePage}  />

• 4. 检查版本兼容与原生配置
  • createSwitchNavigator是React Navigation 4的API，v5版本已移除该能力，若确认使用v5请替换为条件渲染实现同等逻辑，避免版本兼容问题导致deep link失效。
  • 需补充原生端配置：安卓在AndroidManifest.xml的主Activity中添加对应scheme的intent-filter，iOS在Info.plist中添加URL Schemes配置，否则系统不会将跳转链接转发到你的应用。

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