在使用Capacitor的Ionic/React.js应用中实现Firebase Dynamic Links相关问题

监听器放置方案 #

核心结论 #

你使用的@pantrist/capacitor-firebase-dynamic-links插件已经完成了原生层的封装，不需要在Android、iOS原生工程中单独编写监听器代码，只需要在React应用的全局入口位置注册监听即可。

React端推荐放置位置 #

建议放在根组件App.tsx的空依赖useEffect钩子中，同时要记得在组件卸载时移除监听器避免内存泄漏，另外需要额外补充冷启动场景的动态链接获取逻辑，完整示例如下：

import { CapacitorFirebaseDynamicLinks } from '@pantrist/capacitor-firebase-dynamic-links';
import { useEffect } from 'react';
import { IonApp } from '@ionic/react';

const App = () => {
  useEffect(() => {
    // 注册应用运行时的动态链接监听器
    const deepLinkListener = CapacitorFirebaseDynamicLinks.addListener(
      'deepLinkOpen', 
      (data: { url: string }) => {
        // 在此处实现你的导航处理逻辑，比如解析url参数跳转到对应页面
        console.log('收到动态链接：', data.url);
      }
    );

    // 处理应用冷启动时触发的动态链接（监听器无法捕获冷启动场景的调用）
    const getInitialDynamicLink = async () => {
      const { url } = await CapacitorFirebaseDynamicLinks.getDynamicLink();
      if (url) {
        // 复用上面的导航处理逻辑即可
        console.log('冷启动获取动态链接：', url);
      }
    };
    getInitialDynamicLink();

    // 组件卸载时移除监听器
    return () => {
      deepLinkListener.remove();
    };
  }, []);

  return (
    <IonApp>
      {/* 你的原有应用路由、组件逻辑 */}
    </IonApp>
  );
};

export default App;

原生端自定义监听位置（无特殊需求不需要修改） #

如果有自定义原生逻辑的需求，可在对应位置添加监听逻辑：

• Android端：放在主Activity的onCreate生命周期方法中
• iOS端：放在AppDelegate的application:didFinishLaunchingWithOptions:生命周期方法中

前置注意事项 #

使用前请确保你已经完成以下配置：

• 两端原生工程都已导入Firebase对应配置文件（Android的google-services.json、iOS的GoogleService-Info.plist）
• 已完成动态链接域名的关联配置：Android端上传assetlinks.json到域名根目录，iOS端配置好Associated Domains、上传apple-app-site-association到域名根目录

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