React Native集成Firebase Deep Link：无法接收动态查询参数

问题背景 #

在React Native应用中使用Firebase Dynamic Link实现深度链接功能，已在Firebase控制台创建域名xyz.page.link，生成深度链接xyz.page.link/resetforgottenPassword。需要在链接中携带动态查询参数（如xyz.page.link/resetforgottenPassword?forgotPasswordCode=123），目前能正常接收链接，但无法提取动态查询参数。已完成Android和iOS平台的Linking配置，期望点击链接后跳转至ResetPassword页面并携带对应参数。

当前使用的核心代码如下：

Linking配置 #

const linking = {
  prefixes: ['https://xyz.page.link', 'xyz://'],
  config: {
    screens: {
      ResetPassword: {
        path: '/resetforgottenPassword',
      },
    },
  },
};

动态链接处理函数 #

const handleDynamicLink = (link) => {
    // Handle dynamic link inside your own application
    if (link.url === 'https://thriveonthespectrum.page.link/resetforgottenPassword') {
      // ...navigate to your screen
    }
  };

订阅动态链接 #

useEffect(() => {
    const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
  }, []);

解决方案 #

1. 解析查询参数并导航 #

修改handleDynamicLink函数，通过URL对象解析完整链接中的查询参数，再传递给目标页面：

// 先通过React Navigation的useNavigation钩子获取导航对象
const navigation = useNavigation();

const handleDynamicLink = (link) => {
  // 解析完整链接
  const urlInstance = new URL(link.url);
  
  // 提取查询参数
  const forgotPasswordCode = urlInstance.searchParams.get('forgotPasswordCode');
  
  // 判断是否为重置密码链接且参数存在
  if (urlInstance.pathname === '/resetforgottenPassword' && forgotPasswordCode) {
    // 导航到ResetPassword页面并传递参数
    navigation.navigate('ResetPassword', { forgotPasswordCode });
  }
};

2. 完善订阅逻辑 #

在useEffect中添加订阅清理逻辑，避免内存泄漏：

useEffect(() => {
  const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
  // 组件卸载时取消订阅
  return unsubscribe;
}, [navigation]); // 依赖navigation确保导航可用

3. （可选）React Navigation自动参数解析 #

如果使用React Navigation，可以在linking配置中定义参数解析规则，让导航自动处理参数传递：

const linking = {
  prefixes: ['https://xyz.page.link', 'xyz://'],
  config: {
    screens: {
      ResetPassword: {
        path: '/resetforgottenPassword',
        // 定义查询参数解析规则
        parse: {
          forgotPasswordCode: (value) => value,
        },
      },
    },
  },
};

4. 在ResetPassword页面获取参数 #

在ResetPassword页面中，通过路由参数获取传递的值：

// ResetPassword.js
const ResetPassword = ({ route }) => {
  const { forgotPasswordCode } = route.params;
  
  // 使用参数进行后续密码重置逻辑处理
  return (
    // 页面UI内容
  );
};

关键点说明 #

• 使用原生URL对象的searchParams方法可以便捷提取查询参数，无需手动拆分字符串
• 确保导航对象navigation在handleDynamicLink中可用，可通过React Navigation的useNavigation钩子获取
• 组件卸载时必须取消动态链接订阅，防止内存泄漏

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