如何实现从现有App跳转至React Native App？含Facebook跳转示例

核心是利用**深度链接（Deep Linking）**机制，通过自定义URL协议或系统级链接方案，让第三方应用（如Facebook）的跳转请求被系统识别并导向你的RN应用。以下是具体实现步骤：

一、配置RN应用支持深度链接 #

iOS端配置 #

1. 打开项目的Info.plist文件，添加URL Scheme配置：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>mycustomapp</string> <!-- 替换为你的自定义Scheme，比如公司名+应用名 -->
    </array>
  </dict>
</array>

2. 若需更优雅的跳转（避免Scheme冲突、支持未安装时跳转网页），可配置Universal Links：在Xcode中开启Associated Domains能力，添加applinks:yourdomain.com，同时在你的域名下配置apple-app-site-association文件。

Android端配置 #

打开android/app/src/main/AndroidManifest.xml，在主Activity（通常是MainActivity）中添加intent-filter：

<activity
  android:name=".MainActivity"
  ...>
  <!-- 原有配置 -->
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 自定义Scheme -->
    <data
      android:scheme="mycustomapp"
      android:host="open" /> <!-- 可自定义host，用于区分不同跳转场景 -->
  </intent-filter>
  <!-- 若配置App Links，需添加另一个intent-filter并指定域名 -->
</activity>

二、在RN应用中处理跳转逻辑 #

使用React Native官方的Linking模块监听和处理跳转请求：

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

const App = () => {
  // 处理应用运行时的跳转请求
  useEffect(() => {
    const handleOpenURL = (event) => {
      const url = event.url;
      // 解析url，根据不同路径执行对应逻辑，比如跳转到指定页面
      console.log('跳转链接:', url);
      // 示例：mycustomapp://open/detail?id=123 -> 解析id并跳转详情页
    };

    const subscription = Linking.addEventListener('url', handleOpenURL);

    // 处理应用冷启动时的跳转请求
    Linking.getInitialURL().then(url => {
      if (url) {
        handleOpenURL({ url });
      }
    });

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

  // 应用其余逻辑...
};

export default App;

三、在第三方应用中设置跳转触发 #

以Facebook为例，在帖子、广告或可点击内容中使用你的自定义Scheme链接，比如：

• mycustomapp://open/detail?id=123

用户点击该链接后：

• 若已安装你的应用，系统会直接打开应用并触发Linking的监听逻辑；
• 若未安装，可通过第三方平台的跳转规则（比如Facebook的应用安装引导）导向应用商店，或配置Universal Links/App Links跳转至你的网页落地页。

注意事项 #

• 自定义Scheme尽量使用独特名称（如companyname-app），避免与其他应用冲突；
• Universal Links/App Links是更推荐的方案，体验更流畅且无Scheme冲突问题，但需要域名和服务器配置支持；
• 测试跳转时：
  • iOS模拟器：使用命令xcrun simctl openurl booted mycustomapp://open/test
  • Android设备：使用命令adb shell am start -W -a android.intent.action.VIEW -d "mycustomapp://open/test" com.your.app.package
• 部分第三方平台对跳转链接有审核机制，需提前确认平台规则（如Facebook需验证链接安全性）。

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