React Native如何获取跳转至App的Deep Link完整地址（iOS&Android）

一、先修改Web端跳转链接（携带参数） #

首先在Web端的跳转链接里加入需要传递的信息，示例：

<a href="my.app://profile?userId=123&username=robert">打开我的App</a>

二、iOS端实现 #

1. 配置URL Scheme #

打开Xcode中的RN项目iOS工程：

• 找到Info.plist文件，右键选择「Open As」→「Source Code」
• 添加以下配置（替换my.app为你的自定义Scheme）：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>my.app</string>
    </array>
  </dict>
</array>

2. 原生层获取并传递Deep Link #

Objective-C版本（AppDelegate.m）

#import <React/RCTLinkingManager.h>

// 适配iOS 8及以下
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  // 打印完整Deep Link地址
  NSLog(@"Deep Link URL: %@", url.absoluteString);
  return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}

// 适配iOS 9+
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  NSLog(@"Deep Link URL: %@", url.absoluteString);
  return [RCTLinkingManager application:application openURL:url options:options];
}

Swift版本（AppDelegate.swift）

import UIKit
import React

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    print("Deep Link URL: \(url.absoluteString)")
    return RCTLinkingManager.application(app, open: url, options: options)
  }
}

3. React Native层获取链接 #

使用Linking模块处理两种场景（App后台唤醒、冷启动）：

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

useEffect(() => {
  // 处理App后台运行时的跳转
  const handleOpenURL = ({ url }) => {
    console.log('完整Deep Link地址:', url);
    // 解析参数示例
    const params = new URLSearchParams(url.split('?')[1]);
    const userId = params.get('userId');
    const username = params.get('username');
    // 后续业务逻辑处理
  };

  Linking.addEventListener('url', handleOpenURL);

  // 处理App冷启动时的跳转
  Linking.getInitialURL().then(url => {
    if (url) {
      console.log('初始Deep Link地址:', url);
      // 同样解析参数处理
    }
  });

  return () => {
    Linking.removeEventListener('url', handleOpenURL);
  };
}, []);

三、Android端实现 #

1. 配置URL Scheme #

打开android/app/src/main/AndroidManifest.xml，在MainActivity标签内添加intent-filter：

<activity
  android:name=".MainActivity"
  android:label="@string/app_name"
  android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
  android:launchMode="singleTask"
  android:windowSoftInputMode="adjustResize">
  <!-- 新增Deep Link配置 -->
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="my.app" />
  </intent-filter>
</activity>

2. React Native层获取链接 #

直接复用iOS端的RN代码即可，Linking模块会自动适配Android：

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

useEffect(() => {
  const handleOpenURL = ({ url }) => {
    console.log('完整Deep Link地址:', url);
    // 解析参数
    const params = new URLSearchParams(url.split('?')[1]);
    // 业务逻辑处理
  };

  Linking.addEventListener('url', handleOpenURL);

  Linking.getInitialURL().then(url => {
    if (url) {
      console.log('初始Deep Link地址:', url);
    }
  });

  return () => {
    Linking.removeEventListener('url', handleOpenURL);
  };
}, []);

注意：Android端需确保MainActivity的launchMode设置为singleTask，避免重复创建页面实例。

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