如何在React Native应用的指定弹窗/页面中接收Chrome分享的链接

iOS 配置步骤 #

• 配置URL Schemes：打开Xcode项目，进入Info标签页，找到URL Types并添加新条目。设置Identifier为你的应用标识（比如com.yourapp），URL Schemes填写自定义协议（比如myapp），用于其他应用通过该协议唤起你的应用并传递链接。
• 配置Universal Links（可选）：若希望支持http/https链接直接唤起应用，需配置Apple App Site Association文件并上传至域名根目录，同时在Xcode的Signing & Capabilities中添加Associated Domains，填入applinks:你的域名。
• RN代码监听链接：使用LinkingAPI监听链接事件，同时获取应用启动时的初始链接。

Android 配置步骤 #

• 添加Intent Filter：在AndroidManifest.xml的主Activity标签内添加以下intent-filter，用于接收文本类（含链接）的分享内容：

<intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:mimeType="text/plain" />
</intent-filter>

• 处理Intent传递：可通过LinkingAPI直接监听链接，无需额外修改原生代码（若需更复杂处理，可在MainActivity中重写onNewIntent方法）。

React Native 核心代码实现 #

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

const App = () => {
  // 处理接收到的链接
  const handleReceivedUrl = (urlData) => {
    const targetUrl = typeof urlData === 'string' ? urlData : urlData.url;
    console.log('接收到的分享链接:', targetUrl);
    // 这里添加你的业务逻辑，比如解析链接、跳转对应页面等
  };

  useEffect(() => {
    // 监听后续的链接分享事件
    Linking.addEventListener('url', handleReceivedUrl);

    // 获取应用启动时携带的链接
    Linking.getInitialURL().then(initialUrl => {
      if (initialUrl) {
        handleReceivedUrl(initialUrl);
      }
    });

    // 组件卸载时移除监听
    return () => {
      Linking.removeEventListener('url', handleReceivedUrl);
    };
  }, []);

  return (
    // 你的应用视图组件
  );
};

export default App;

注意事项 #

• iOS端若使用Universal Links，需确保域名的Apple App Site Association文件配置正确，且已通过苹果验证。
• Android端可根据需求调整intent-filter的data属性，比如指定android:scheme="http"或https来仅接收网页链接。
• 测试时可通过其他应用（如Chrome）分享链接，选择你的应用作为接收方，验证是否能正确获取链接。

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