React Native如何捕获外部浏览器标签页URL并自动获取外部点击链接

一、捕获外部浏览器唤起应用时的URL代码 #

1. 官方 Linking API 实现（无额外依赖） #

这是React Native官方推荐的方案，可处理应用从关闭/后台状态被外部链接唤起的场景。

代码示例

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

useEffect(() => {
  // 获取应用启动时的初始URL（关闭状态被唤起）
  const fetchInitialUrl = async () => {
    const url = await Linking.getInitialURL();
    url && handleCapturedUrl(url);
  };

  // 监听应用后台时被唤起的URL事件
  const urlSubscription = Linking.addEventListener('url', (event) => {
    handleCapturedUrl(event.url);
  });

  fetchInitialUrl();

  // 组件卸载时清理监听
  return () => urlSubscription.remove();
}, []);

// 处理捕获到的URL逻辑
const handleCapturedUrl = (url) => {
  console.log('捕获到的外部URL:', url);
  // 这里可解析URL参数、跳转对应页面等
};

2. 第三方库辅助（复杂路由场景） #

如果需要更精细化的路由解析，可使用react-native-deep-linking：

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

useEffect(() => {
  // 配置自定义Scheme和路由规则
  DeepLinking.addScheme('myapp://');
  DeepLinking.addRoute('/goods/:id', (res) => {
    console.log('商品ID:', res.id);
    console.log('原始URL:', res.url);
  });

  // 初始化处理启动URL
  const initDeepLink = async () => {
    const url = await Linking.getInitialURL();
    url && DeepLinking.evaluateUrl(url);
  };

  // 监听后台唤起事件
  const subscription = Linking.addEventListener('url', (event) => {
    DeepLinking.evaluateUrl(event.url);
  });

  initDeepLink();
  return () => subscription.remove();
}, []);

二、自动捕获外部点击的URL（无需手动复制） #

核心是让外部链接直接唤起你的RN应用，同时传递URL信息，分两种实现方式：

1. URL Scheme 唤起 #

• 配置应用专属Scheme（如myapp://），外部链接格式为myapp://open?targetUrl=https://example.com。用户点击该链接时会直接唤起应用，通过上述Linking API即可捕获完整URL，解析出目标地址。
• 平台配置：
  • iOS：在Info.plist中添加CFBundleURLSchemes字段，填入自定义Scheme。
  • Android：在AndroidManifest.xml的主Activity中添加<intent-filter>，指定Scheme的处理规则。

2. Universal Links（iOS）/ App Links（Android） #

支持用普通HTTP/HTTPS链接直接唤起应用（如https://yourapp.com/detail/123），无需自定义Scheme：

• iOS：在苹果开发者后台配置关联域名，服务器放置apple-app-site-association文件，Info.plist开启关联域名权限。
• Android：在AndroidManifest.xml中配置App Links的<intent-filter>，服务器放置assetlinks.json文件。
• 代码处理逻辑和Linking API监听一致，捕获到的URL即为用户点击的外部链接。

测试小技巧 #

• iOS模拟器：用命令行唤起链接 xcrun simctl openurl booted myapp://open?targetUrl=https://example.com
• Android设备：用命令行唤起链接 adb shell am start -W -a android.intent.action.VIEW -d "myapp://open?targetUrl=https://example.com" com.yourapp.package

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