能否获取用户通过Deep Link跳转至App时的来源URL？

默认情况下，React Native的Linking.getInitialUrl()只能获取到Deep Link本身，无法直接拿到用户点击链接时所在的浏览器页面URL（即Referrer），因为系统层面不会自动传递该信息。以下是几种可行的解决方案：

1. 主动在Deep Link中拼接Referrer参数（最可靠通用） #

如果能控制Deep Link的生成逻辑（比如自有网页），可以在生成Deep Link时，将当前页面URL编码后作为参数附加到链接中。

示例： #

网页端生成Deep Link时：

// 网页端代码：获取当前页面URL并编码
const currentPageUrl = encodeURIComponent(window.location.href);
const deepLink = `myapp://product/detail?referrer=${currentPageUrl}`;

React Native端解析参数：

import { Linking, useEffect } from 'react-native';

// 处理初始Deep Link
const parseInitialReferrer = async () => {
  const url = await Linking.getInitialUrl();
  if (url) {
    const urlObj = new URL(url);
    const referrerParam = urlObj.searchParams.get('referrer');
    if (referrerParam) {
      const originalPageUrl = decodeURIComponent(referrerParam);
      console.log('跳转前的浏览器页面URL:', originalPageUrl);
      // 后续业务逻辑处理
    }
  }
};

// 监听后续的Deep Link跳转
const setupDeepLinkListener = () => {
  const handleDeepLink = (event) => {
    const urlObj = new URL(event.url);
    const referrerParam = urlObj.searchParams.get('referrer');
    if (referrerParam) {
      const originalPageUrl = decodeURIComponent(referrerParam);
      console.log('跳转前的浏览器页面URL:', originalPageUrl);
    }
  };

  const subscription = Linking.addEventListener('url', handleDeepLink);
  return () => subscription.remove();
};

// 在组件中调用
useEffect(() => {
  parseInitialReferrer();
  const unsubscribe = setupDeepLinkListener();
  return unsubscribe;
}, []);

2. 原生层获取系统传递的Referrer（仅部分场景支持） #

部分系统版本和浏览器会在跳转Deep Link时携带Referrer信息，但需要原生代码配合获取，再传递给React Native层。

iOS（iOS 13+） #

在AppDelegate.m中拦截URL跳转，通过系统API获取Referrer：

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
    // 获取Referrer
    NSString *referrerUrl = options[UIApplicationOpenURLOptionsKeyReferrer];
    if (referrerUrl) {
        // 将Referrer传递给React Native层
        RCTBridge *bridge = self.bridge;
        NSDictionary *eventData = @{@"referrer": referrerUrl};
        [bridge.eventDispatcher sendAppEventWithName:@"DeepLinkReferrerReceived" body:eventData];
    }
    return YES;
}

React Native层监听原生事件：

import { NativeEventEmitter, NativeModules, useEffect } from 'react-native';

useEffect(() => {
  const emitter = new NativeEventEmitter(NativeModules.RCTEventEmitter);
  const subscription = emitter.addListener('DeepLinkReferrerReceived', (data) => {
    console.log('跳转前的浏览器页面URL:', data.referrer);
  });
  return () => subscription.remove();
}, []);

Android #

Android系统传递的Referrer通常是应用包名而非网页URL，网页场景下可靠性较低，不推荐依赖此方式。如果需要尝试，可在Activity中获取：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Uri referrer = getIntent().getParcelableExtra(Intent.EXTRA_REFERRER);
    if (referrer != null) {
        String referrerUrl = referrer.toString();
        // 传递给React Native层
    }
}

3. 使用第三方链接管理服务 #

像Branch.io、Firebase Dynamic Links这类服务会自动跟踪跳转来源，无需手动拼接参数，在App中可直接获取到原页面URL。以Branch为例：

import branch from 'react-native-branch';

useEffect(() => {
  branch.subscribe(({ error, params }) => {
    if (!error && params) {
      console.log('跳转前的浏览器页面URL:', params.referring_identity);
    }
  });
}, []);

局限性说明 #

如果无法控制Deep Link的生成（比如第三方网页的链接），且第三方未主动添加Referrer参数，那么无法获取到原页面URL，因为系统不会主动传递该信息，这种情况下只能依赖第三方链接服务或网页方配合。

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