React Native 中如何处理深度链接 (Deep Linking)？

推荐答案

在 React Native 中处理深度链接（Deep Linking）通常涉及以下几个步骤：

1. 配置深度链接：

   • 对于 iOS，需要在 Info.plist 文件中配置 URL Scheme 或 Universal Links。
   • 对于 Android，需要在 AndroidManifest.xml 文件中配置 intent-filter。

2. 使用第三方库：

   • 推荐使用 react-navigation 库中的 Linking 功能来处理深度链接。
   • 也可以使用 react-native-deep-linking 或 react-navigation-deep-linking 等第三方库。

3. 处理链接：

   • 使用 Linking.getInitialURL() 获取应用启动时的深度链接。
   • 使用 Linking.addEventListener('url', callback) 监听应用运行时的深度链接。

4. 导航到指定页面：

   • 根据深度链接的路径，使用 react-navigation 的 navigation.navigate() 方法导航到相应的页面。

本题详细解读

1. 配置深度链接

iOS 配置

在 Info.plist 文件中添加以下内容来配置 URL Scheme：

-- -------------------- ---- -------
---------------------------
-------
  ------
    -----------------------------
    -------
      ----------------------
    --------
  -------
--------

对于 Universal Links，需要在 Info.plist 中添加 associated domains 并配置 apple-app-site-association 文件。

Android 配置

在 AndroidManifest.xml 文件中添加以下内容来配置 intent-filter：

<intent-filter android:autoVerify="true">
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="myapp" />
</intent-filter>

2. 使用第三方库

使用 react-navigation 的 Linking 功能

react-navigation 提供了内置的深度链接支持。你可以在 NavigationContainer 中配置深度链接：

-- -------------------- ---- -------
------ - ------------------- - ---- ---------------------------

----- ------- - -
  --------- ------------ ---------------------
  ------- -
    -------- -
      ----- -------
      -------- --------------
    --
  --
--

-------- ----- -
  ------ -
    -------------------- ------------------
      --- ---- ---------- --------- ---
    ----------------------
  --
-

3. 处理链接

获取初始链接

使用 Linking.getInitialURL() 获取应用启动时的深度链接：

import { Linking } from 'react-native';

Linking.getInitialURL().then((url) => {
  if (url) {
    // Handle the deep link
  }
});

监听链接

使用 Linking.addEventListener('url', callback) 监听应用运行时的深度链接：

import { Linking } from 'react-native';

const handleDeepLink = (event) => {
  const { url } = event;
  // Handle the deep link
};

Linking.addEventListener('url', handleDeepLink);

4. 导航到指定页面

根据深度链接的路径，使用 navigation.navigate() 方法导航到相应的页面：

-- -------------------- ---- -------
------ - -------------------- ------------- - ---- ---------------------------

-------- ----- -
  ----- ---------- - ----------------

  ----- -------------- - ----- -- -
    -- ---- --- --------------- -
      ----------------------------
    - ---- -- ---- --- ---------------------- -
      ------------------------------ - --- ----- ---
    -
  --

  ------ -
    -------------------- ------------------
      --- ---- ---------- --------- ---
    ----------------------
  --
-