React Native集成Firebase Deeplink求助：实现电商式分享跳转

AI 小北

2026-5-7

Hey，看起来你在React Native里集成Firebase动态链接的时候碰到了两个头疼的问题：分享出去的链接点进App拿不到URL，用Branch又有浏览器跳转的异常。我来帮你一步步捋清楚怎么解决：

一、先修正Firebase动态链接的生成方式

你现在用的https://stepout.page.link/activity_id/?id=这种拼接方式，其实不是标准的Firebase动态链接生成逻辑——这种写法只是把参数挂在短链接后面，Firebase没法正确识别和封装参数，自然App端拿不到数据。正确的做法是让Firebase帮你生成标准的动态链接：

两种生成动态链接的方式：

1. 控制台手动生成（适合测试）

打开Firebase控制台 → 动态链接 → 新建动态链接
设置短链接后缀（比如stepout.page.link/activity）
填写深层链接：这里放你带参数的业务链接，比如https://yourapp.com/activity?id=123
配置应用跳转规则：指定你的React Native App的Android包名和iOS Bundle ID，确保跳转时能唤起App

2. 代码动态生成（适合生产环境）

先安装Firebase动态链接的React Native库：

npm install @react-native-firebase/dynamic-links

然后用代码生成合规的动态链接：

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

async function generateActivityLink(activityId, activityName) {
  const dynamicLink = await dynamicLinks().buildLink({
    link: `https://yourapp.com/activity?id=${activityId}`, // 带参数的业务深层链接
    domainUriPrefix: 'https://stepout.page.link', // 你的Firebase动态链接域名
    android: {
      packageName: 'com.your.app.package', // 替换成你的Android包名
      fallbackUrl: `https://yourapp.com/web/activity?id=${activityId}`, // 无App时跳网页
    },
    ios: {
      bundleId: 'com.your.app.bundle', // 替换成你的iOS Bundle ID
      fallbackUrl: `https://yourapp.com/web/activity?id=${activityId}`,
    },
    social: {
      title: activityName,
      descriptionText: '快来看看这个活动！',
    },
  });

  return dynamicLink;
}

把这个生成的dynamicLink传给react-native-share的url字段，分享出去的就是标准的Firebase动态链接，参数会被正确处理。

二、正确接收动态链接的跳转

你现在用的Linking API是基础的deeplink处理，但Firebase有专门的监听逻辑，能更可靠地处理从其他App、浏览器跳转的场景：

1. 在根组件添加监听（比如App.js）

import dynamicLinks from '@react-native-firebase/dynamic-links';
import { Linking, useEffect } from 'react-native';
import { useNavigation } from '@react-navigation/native'; // 假设用React Navigation

function App() {
  const navigation = useNavigation();

  useEffect(() => {
    // 处理App冷启动时的初始链接
    const getInitialLink = async () => {
      const initialLink = await dynamicLinks().getInitialLink();
      if (initialLink) handleLinkData(initialLink);
    };

    // 处理App运行时的跳转链接
    const linkSubscription = dynamicLinks().onLink((link) => {
      handleLinkData(link);
    });

    // 兼容旧的Linking触发场景
    const linkingSubscription = Linking.addEventListener('url', (event) => {
      dynamicLinks().resolveLink(event.url).then(handleLinkData);
    });

    getInitialLink();

    // 组件卸载时清除监听
    return () => {
      linkSubscription();
      linkingSubscription.remove();
    };
  }, []);

  // 解析链接参数并跳转到详情页
  const handleLinkData = (link) => {
    const url = new URL(link.url);
    const activityId = url.searchParams.get('id');
    console.log('拿到的活动ID:', activityId);
    // 跳转到对应的详情页
    navigation.navigate('ActivityDetail', { id: activityId });
  };

  // ...其他组件逻辑
}

这种方式比单纯用Linking更可靠，Firebase会帮你处理链接的解析、跳转逻辑，包括社交平台、浏览器的跳转场景。

2. 必须检查原生端配置（最容易踩坑的地方）

很多时候拿不到链接，都是因为Android/iOS的配置没到位：

Android配置

打开android/app/src/main/AndroidManifest.xml，在<activity>标签内添加deeplink过滤器：

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <!-- 匹配你的Firebase动态链接域名 -->
  <data android:host="stepout.page.link" android:scheme="https" />
  <!-- 匹配你的业务深层链接域名 -->
  <data android:host="yourapp.com" android:scheme="https" />
</intent-filter>

同时确保已经在Firebase控制台添加了Android应用，并且google-services.json已经放到android/app目录下。

iOS配置

打开ios/YourApp/Info.plist，添加以下配置：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>stepout</string> <!-- 自定义你的App Scheme，比如stepout -->
    </array>
  </dict>
</array>
<key>FirebaseDynamicLinksCustomDomains</key>
<array>
  <string>https://stepout.page.link</string> <!-- 你的Firebase动态链接域名 -->
</array>

然后打开Xcode，进入项目设置 → Signing & Capabilities → 添加Associated Domains，添加applinks:stepout.page.link，最后确保GoogleService-Info.plist已经添加到Xcode项目中。

三、关于Branch的问题排查

你提到用Branch时浏览器跳转显示www.google.com，大概率是Branch的链接配置或原生配置出了问题：

检查Branch控制台的链接设置，确保深层链接和fallback URL正确配置
核对iOS的Associated Domains和Android的Intent Filter是否正确
如果不是必须用Branch，建议优先用Firebase动态链接，它和React Native的集成更直接，文档也更完善

四、常见测试排查技巧

用真机测试：模拟器对App跳转的支持经常有问题，真机测试更准确
清理App缓存：有时候旧的链接缓存会导致异常，卸载重装App后再测试
先测短信分享：有些社交平台会对链接做预处理，先分享到短信测试跳转是否正常，再测社交平台
查看Firebase控制台统计：在动态链接页面可以看到链接的点击、跳转数据，确认链接是否被正确解析

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

React Native集成Firebase Deeplink求助：实现电商式分享跳转

两种生成动态链接的方式： #

1. 控制台手动生成（适合测试） #

2. 代码动态生成（适合生产环境） #

1. 在根组件添加监听（比如App.js） #

2. 必须检查原生端配置（最容易踩坑的地方） #

Android配置 #

iOS配置 #