React Native中Firebase动态链接跨安装路由无法保留问题咨询

这个问题核心是Firebase动态链接的安装后初始链接捕获逻辑没配置到位，以下是具体的排查和解决步骤：

1. 确认Firebase动态链接的基础配置 #

• 不要手动拼接?link参数，在Firebase控制台创建动态链接时，直接在「深层链接」字段填入目标路由（比如https://fakedomain.org/upload），同时确保你的自定义域名（fakedomain.org）和Firebase动态链接域名（如xxx.page.link）已完成验证。
• 检查「应用预览页面」设置，选择「直接打开应用」，避免预览页拦截链接传递；如果需要预览页，也要确保跳转逻辑正确指向应用商店+保留深层链接。

2. 配置React Native端的链接捕获逻辑 #

iOS端配置 #

• 在Info.plist中添加两个关键配置：

  <!-- 自定义Scheme，用于应用内跳转 -->
  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>fakedomain</string>
      </array>
    </dict>
  </array>
  <!-- Firebase动态链接域名，用于捕获通用链接 -->
  <key>FirebaseDynamicLinksCustomDomains</key>
  <array>
    <string>https://yourdomain.page.link</string>
  </array>
  

• 在AppDelegate.m中实现通用链接的回调处理，把链接传递给RN：

  #import <Firebase/Firebase.h>
  #import <FirebaseDynamicLinks/FirebaseDynamicLinks.h>
  
  - (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
    BOOL handled = [[FIRDynamicLinks dynamicLinks] handleUniversalLink:userActivity.webpageURL completion:^(FIRDynamicLink * _Nullable dynamicLink, NSError * _Nullable error) {
      if (dynamicLink && dynamicLink.url) {
        // 通过通知把链接传给RN
        [[NSNotificationCenter defaultCenter] postNotificationName:@"DeepLinkReceived" object:dynamicLink.url.absoluteString];
      }
    }];
    return handled;
  }
  

• RN端监听通知并处理导航：

  import { useEffect, useRef } from 'react';
  import { NativeEventEmitter } from 'react-native';
  import { useNavigation } from '@react-navigation/native';
  import dynamicLinks from '@react-native-firebase/dynamic-links';
  
  const App = () => {
    const navigation = useNavigation();
    const eventEmitter = useRef(new NativeEventEmitter());
  
    useEffect(() => {
      // 监听安装后首次打开的初始链接
      dynamicLinks().getInitialLink().then(link => {
        if (link?.url) {
          // 解析路由，比如/upload跳转到Upload页面
          const route = link.url.pathname.replace('/', '');
          navigation.navigate(route);
        }
      });
  
      // 监听后续的动态链接跳转
      const subscription = eventEmitter.current.addListener('DeepLinkReceived', url => {
        const route = new URL(url).pathname.replace('/', '');
        navigation.navigate(route);
      });
  
      return () => subscription.remove();
    }, [navigation]);
  
    return (/* 你的应用组件 */);
  };
  

Android端配置 #

• 在AndroidManifest.xml的主Activity中添加Intent Filter：

  <activity
    android:name=".MainActivity"
    android:launchMode="singleTask"> <!-- 必须设置singleTask，避免重复启动 -->
    <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <!-- 自定义Scheme -->
      <data android:scheme="fakedomain" />
      <!-- Firebase动态链接域名 -->
      <data android:host="yourdomain.page.link" />
    </intent-filter>
  </activity>
  

• 在MainActivity.java中处理动态链接：

  import com.google.firebase.dynamiclinks.FirebaseDynamicLinks;
  import com.google.firebase.dynamiclinks.PendingDynamicLinkData;
  import android.util.Log;
  
  @Override
  protected void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    handleDynamicLink(intent);
  }
  
  private void handleDynamicLink(Intent intent) {
    FirebaseDynamicLinks.getInstance()
      .getDynamicLink(intent)
      .addOnSuccessListener(this, pendingDynamicLinkData -> {
        Uri deepLink = null;
        if (pendingDynamicLinkData != null) {
          deepLink = pendingDynamicLinkData.getLink();
        }
        if (deepLink != null) {
          // 发送事件给RN
          getReactInstanceManager().getCurrentReactContext()
            .getJSModule(com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit("DeepLinkReceived", deepLink.toString());
        }
      })
      .addOnFailureListener(this, e -> Log.w("DynamicLink", "获取链接失败", e));
  }
  

• RN端的处理逻辑和iOS一致，监听DeepLinkReceived事件并导航。

3. 用正确方式生成动态链接 #

如果是代码生成链接，不要手动拼接，用Firebase官方API生成：

import dynamicLinks from '@react-native-firebase/dynamic-links';

const generateDynamicLink = async (targetRoute) => {
  const link = await dynamicLinks().buildLink({
    link: `https://fakedomain.org/${targetRoute}`,
    domainUriPrefix: 'https://yourdomain.page.link',
    android: {
      packageName: 'com.your.app.package',
    },
    ios: {
      bundleId: 'com.your.app.bundle',
    },
  });
  return link;
};

4. 测试要点 #

• 必须用真实设备测试，模拟器的安装流程无法完整模拟应用商店跳转后的链接传递。
• 测试前先卸载应用，点击动态链接跳转到应用商店安装，安装完成后直接打开应用，检查路由是否正确跳转。
• 可以在动态链接末尾加?d=1（比如https://yourdomain.page.link/xxxx?d=1）打开调试页面，验证链接的配置是否正确。

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