在 React Native 中设置 Deeplink

在这个博客中，我们将讨论如何在 React Native 应用中为 Android 和 iOS 平台设置深度链接，这通常是从产品开发角度看移动应用的一个需求。

深度链接要求

当我们有特定的需求，比如我们想从其网页打开移动应用的特定屏幕，我们需要通过深度链接来配置它，这将为用户提供更好的用户界面，同时也会增加移动应用中的用户参与度。

深度链接是一个简单的 URI，基本上可以启动应用程序并将用户重定向到移动应用程序内的特定屏幕。移动应用程序的最基本形式的深度链接就像是在应用程序内定义的自定义 URI 方案，我们也有内置的 URI 方案，如下面提供的示例。

//Custom URI scheme examples
<data android:scheme="fb" />
<data android:scheme="slack"/>
<data android:scheme="twitter"/>
//Built in  URI scheme examples
<data android:scheme="http" android:host="domain_name.com" />
<data android:scheme="https" android:host="domain_name.com" />

现在，让我们按照以下步骤在 React Native 应用程序中进行基本设置深度链接

深度链接设置步骤

步骤 1：设置 Android 平台

要在 Android 上设置深度链接，我们需要修改 android/app/src/main/AndroidManifest.xml 文件，在我的例子中，我在 intent-filter 标签内添加了 demoapp 自定义方案，如下图所示：

<activity ...>
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="demoapp" android:host="domain/sub_domain" />
  </intent-filter>
</activity>

步骤 2：设置 iOS 平台

要在 iOS 上设置自定义 URI 方案，我们需要打开 Xcode，并按照以下路径设置方案：

• 打开 Xcode，选择你的项目。
• 选择你的目标（target）。
• 选择“Info”选项卡。
• 在“URL Types”部分，点击“+”按钮添加一个新条目。
• 在“URL Schemes”字段中输入你的自定义方案，例如“demoapp”。

检查 AppDelegate 文件

打开 Xcode 中的 AppDelegate 文件，检查是否包含以下代码行，这些代码行是处理 iOS 设备上深度链接所必需的，如下图所示：

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  return [RCTLinkingManager application:app openURL:url options:options];
}

现在在进行上述更改后，重新构建项目并在模拟器中重新运行应用程序。我们需要通过 React Native 提供的 Linking API 来跟踪将在移动应用程序内部打开的 URL。

React Native 提供了 Linking API 来获取传入链接的通知。现在我们将使用 Linking API 并根据链接中提供的参数或数据处理应用程序的导航。

在下面的示例中，我基本上从原生平台实现了深度链接设置，现在我们可以测试下面两个场景来处理深度链接。

处理深度链接的两种情况

当应用程序处于关闭状态时，我们需要使用 Linking.getInitialURL() 函数来处理，如下所示：

const fetchDeepLinkingUrl = async () => {
  const url = await Linking.getInitialURL();
  console.log('应用关闭状态---', url);
};

useEffect(() => {
  fetchDeepLinkingUrl();
}, []);

当应用程序处于打开状态时，我们需要使用 Linking.addEventListener() 监听器来处理，如下所示：

useEffect(() => {
  const linking = Linking.addEventListener('url', ({ url }) => {
    console.log('应用打开状态---', url);
  });
  return () => {
    linking.remove();
  };
}, []);

在进行上述设置后，现在我们可以使用以下命令测试深度链接是否正常工作：

// 用于 iOS
npx uri-scheme open "demoapp://domain/sub_domain" --ios

// 用于 Android
npx uri-scheme open "demoapp://domain/sub_domain" --android

以下是处理应用程序关闭和打开状态的深度链接的最终代码，结果将如下所示

import React, { useEffect, useState } from 'react';
import "react-native-gesture-handler";
import {Linking, Text,View} from "react-native";


const App = () => {

  const [currentState,setCurrentState] = useState('');

  const resolveDeeplink = async (url,state) => {
    console.log('resolve deep link',url);
    setCurrentState(`App open from ${state} state \n\n Data is ${url}`)
  };

  const fetchDeepLinkingUrl = async () => {
    // called when app is in close state.
    const url = await Linking?.getInitialURL();
    console.log('app is close state---',url);
    if (url) {
      resolveDeeplink(url,'close');
    }
  };
 
  useEffect(() => {
    fetchDeepLinkingUrl();
    // called when app is in open state.
    const linking = Linking?.addEventListener('url', ({url}) => {
      console.log('app is open state---',url);
      if (url) {
        resolveDeeplink(url,'open');
      }
    });
    return () => {
      linking?.remove();
    };
  }, []);

  
  return(<>
  <View 
    style={{
    height:'100%',
    justifyContent:'center',
    alignItems: 'center',
    backgroundColor:'white'}}>
  <Text style={{fontSize:24,color:'black'}}>{'Test Deep linking'}</Text>
  <Text style={{fontSize:24,color:'black',marginHorizontal:40,marginTop:20,textAlign:'center'}}>{currentState}</Text>
  </View>
  </>)
}


export default App;

处理未安装应用的情况

自定义方案在应用未安装的情况下无法处理回退。这时我们可以使用 iOS 的通用链接（Universal Links）和 Android 的应用链接（App Links）来更有效地处理深度链接。

首先，这种方式更安全，因为它要求你拥有链接所重定向的域名。其次，如果用户未安装你的应用程序，它会在浏览器中打开网站。

总结
现在我们已经了解了如何为移动应用程序设置自定义方案深度链接，以及如何分别在应用关闭或打开状态下处理深度链接。

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。