React Native深度链接技术咨询：点击邮件链接跳转指定页面失败及链接参数获取方案

咱们一步步来，先搞定「Invalid hook call」的错误，再把深度链接的配置捋顺，确保能正常跳转并拿到code参数。

一、排查并修复"Invalid hook call"错误 #

这个错误的三个可能原因，咱们逐个排查解决：

1. 检查React与渲染器版本是否匹配 #

如果是React Native项目，一定要确保react和react-native的版本兼容（比如React 18对应React Native 0.69及以上版本）：

• 打开项目根目录的package.json，查看两个依赖的版本号
• 用命令行执行npm list react react-native，确认版本没有冲突
• 如果版本不兼容，要么升级要么降级（比如运行npm install react@18.2.0 react-native@0.72.0匹配对应版本）

2. 严格遵守React Hooks的使用规则 #

Hooks只能在函数组件的顶层作用域调用，绝对不能在这些场景使用：

• 类组件内部（类组件不能用Hooks，直接改成函数组件就能解决大部分问题）
• 循环、条件判断（比如if (isLoggedIn) { useNavigation(); }这种写法绝对不行）
• 嵌套函数（比如在useEffect或useCallback的回调里调用Hook）

举个正确的示例：

// ✅ 正确：在函数组件顶层调用Hook
function ForgotPassword() {
  const navigation = useNavigation();
  const route = useRoute();

  // ...组件逻辑
}

3. 解决多个React副本的问题 #

如果项目里存在多个React实例，也会触发这个错误：

• 执行npm ls react查看依赖树，确认所有子依赖的React版本和根项目一致
• 运行npm dedupe自动合并重复的依赖包
• 如果是用npm link引入了本地包，要确保本地包的React依赖和主项目一致（可以在本地包的package.json里把react设为peerDependency）

二、正确配置深度链接并获取code参数 #

你的目标链接格式是forgot://password/123456，需要调整Linking配置来正确捕获末尾的code参数：

1. 修正Linking配置 #

把路径规则改成:code来匹配链接末尾的动态参数，同时修正之前的语法错误（比如你之前的prefixes里多了个未闭合的字符串'/code'）：

const resetLinking = {
  prefixes: ['forgot://password'], // 匹配链接的协议+基础路径
  config: {
    screens: {
      ForgotPassword: {
        path: ':code', // 用:code捕获链接末尾的动态参数
        parse: {
          code: (code) => code.toString() // 可选，确保参数是字符串类型
        }
      }
    }
  }
}

如果你的链接格式是forgot://password/ForgotPassword/123456（带有页面路径），就把path改成ForgotPassword/:code。

2. 在目标组件中获取code参数 #

在ForgotPassword函数组件里，用useRoute Hook获取路由参数：

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

function ForgotPassword() {
  const route = useRoute();
  const code = route.params?.code; // 这里就能拿到链接里的123456了

  // 可以在这里处理code的逻辑，比如发送验证请求
  console.log('获取到的code参数：', code);

  return (
    // 你的组件UI
  );
}

3. 确保导航容器正确使用Linking配置 #

最后，把配置传给NavigationContainer：

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

function App() {
  return (
    <NavigationContainer linking={resetLinking}>
      {/* 你的导航栈配置，比如StackNavigator */}
    </NavigationContainer>
  );
}

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