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：

// www.javascriptcn.com code example
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

对于 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 中配置深度链接：

// www.javascriptcn.com code example
import { NavigationContainer } from '@react-navigation/native';

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'profile/:id',
    },
  },
};

function App() {
  return (
    <NavigationContainer linking={linking}>
      {/* Your navigation structure */}
    </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() 方法导航到相应的页面：

// www.javascriptcn.com code example
import { NavigationContainer, useNavigation } from '@react-navigation/native';

function App() {
  const navigation = useNavigation();

  const handleDeepLink = (url) => {
    if (url === 'myapp://home') {
      navigation.navigate('Home');
    } else if (url === 'myapp://profile/123') {
      navigation.navigate('Profile', { id: '123' });
    }
  };

  return (
    <NavigationContainer linking={linking}>
      {/* Your navigation structure */}
    </NavigationContainer>
  );
}