React Native 应用程序中的深度链接:所有你需要知道的!

已发表: 2023-03-13

深度链接已成为当今互联世界的重要组成部分。 “深度链接”这个词对很多人来说可能听起来很陌生; 但是,你们中的大多数人一定已经以某种形式使用过深度链接的概念。

你还记得你点击一个链接并直接在你设备上安装的应用程序中打开一个特定屏幕的例子吗? 无需通过应用程序手动导航? 或者,例如,您希望您的朋友阅读一篇文章并分享该文章的 URL。 您的朋友单击链接并一次性转到所需的内容,而不必先启动主页然后搜索文章。

你有没有想过这是怎么发生的?

嗯,这就是深度链接的作用。 用户点击一个链接并被重定向到移动应用程序或网站中的特定位置,而无需浪费时间在主屏幕上导航。 其他示例包括与朋友分享 YouTube 视频或亚马逊产品的链接、打开品牌的促销链接以转到特定产品页面等。 在这种情况下,深度链接是必不可少的,因为常规 Web 链接无法有效地与本机移动应用程序一起使用。

这篇文章是关于理解深度链接的概念是如何工作的,并了解它的好处。 我们还将讨论如何在适用于 Android 和 iOS 操作系统的 React Native 移动应用程序中实现深度链接的关键步骤。 我们选择了 React Native 框架,因为它是当今移动应用程序开发最流行的偏好之一。

什么是深度链接?

深度链接是一种技术,它使人们能够从外部来源(如另一个应用程序或网站)链接移动应用程序内的特定内容或屏幕。 深层链接是可点击的链接,可将用户直接发送到移动应用程序中的特定位置,而不是在线商店或网络链接。 这个应用内位置可以是任何东西,例如付费专区后面的一段安全内容、一篇文章、一个产品或一个登录屏幕。 用户只需单击 URL 或资源即可到达所需的应用内位置,而无需自己搜索页面。

深度链接的概念如何运作?

深度链接指定了一个自定义的 URL 方案,如通用链接(适用于 iOS 设备)和一个意图 URL(适用于 Android 设备)。 当用户点击深层链接时,操作系统会拦截该链接并打开相关应用程序(如果该应用程序安装在用户设备上)。 然后,应用程序使用深层链接中存在的信息来导航到所需的内容或屏幕。

延迟深度链接?

如果用户深层链接到某个应用程序,但该应用程序未安装在他们的设备上怎么办? 在这里,延迟深度链接出现了。 如果用户点击了一个链接,但该链接所属的应用没有被下载; 用户会被定向到 App Store。 在这里,用户会被引导至 App Store 的确切位置,他们只需单击一下即可安装所需的应用程序。 而且,一旦安装了应用程序,特定的屏幕就会立即打开。

深度链接有什么好处?

深度链接节省了用户的时间并显着增强了用户体验。

深度链接是商业品牌提高用户保留率和转化率的绝佳工具。 品牌可以将促销活动和激励措施与深度链接联系起来; 只需单击一下即可将用户重定向到他们的产品页面。 这样,品牌可以轻松说服用户尝试新产品或服务。 例如,音乐应用所有者想要推广一张新的音乐专辑。 因此,所有者投资广告并与知名网站建立联系。 带有深层链接的音乐专辑封面作为广告活动显示在该网站上。 当网站用户点击深层链接时,他们将被重定向到音乐应用程序中的特定页面,并可以收听专辑。

此外,您可以跟踪深度链接活动并检查您的活动的执行情况。 深层链接还可以提高您的 SEO 排名并最大限度地减少应用程序的流失。

如何在 React Native 应用程序中实现深度链接?

react-navigation 库提供了用于深度链接 React Native 应用程序的链接模块。 这对 React Native 开发人员来说非常方便。

您需要在应用程序中定义一个深层链接模式,将特定的 URL 映射到相关的应用程序屏幕。 react-navigation 提供 Linking 模块和 NavigationContainer 等组件来定义模式。 定义架构后,它可用于处理传入的深层链接。 您需要借助 Linking 模块提供的 addEventListner 方法注册回调函数,以处理传入的深层链接。 当应用程序通过深层链接启动时,将调用回调函数。 此回调函数可用于在应用程序中导航所需的屏幕。

在 IoS 和 Android 中配置深度链接

您需要使用 URL 方案(唯一 URL)配置移动应用程序。 此 URL 方案负责定位和启动安装在用户智能手机设备上的应用程序。 要使应用程序导航到屏幕,您必须设置与配置应用程序的 URL 方案相匹配的前缀。 然后屏幕需要在应用程序中映射到它们各自的路径。 当路径附加到 URL 时,应用程序能够直接导航到特定屏幕。

iOS 和 Android 操作系统的深度链接配置略有不同。 来看看专业的React Native开发者是如何实现Android和iOS深度链接的吧!

在 React Native Android 应用程序中配置深层链接

步骤#1 定义深层链接

打开清单文件并定义您计划在应用中使用的深层链接,以便用户可以直接导航到应用中的特定页面。 在这里,您需要为该特定页面定义一个深层链接。 以下是如何在 AndroidManifest.xml 文件中定义深层链接:
<活动

android:name=”.ProductActivity”

android:label=”Product”>

<意图过滤器>

<action android:name=”android.intent.action.VIEW” />

<category android:name=”android.intent.category.DEFAULT” />

<category android:name=”android.intent.category.BROWSABLE” />

<数据

android:host=”example.com”

android:pathPrefix=”/产品”

android:scheme=”http” />

<数据

android:host=”example.com”

android:pathPrefix=”/产品”

android:scheme=”https” />

</意图过滤器>

</活动>

步骤#2 配置 Intent 过滤器

转到 android/app/src/main 并从那里打开名为 AndroidManifest.xml 的文件。 现在,您需要为每个深层链接配置意图过滤器。 意图过滤器指定您的应用程序能够处理的数据量和操作。

步骤#3 意图处理

您需要处理应用程序活动中的意图。 此意图将从深层链接启动您的应用程序。 对于意图处理,您需要从意图中提取数据,并确定您希望将用户定向到的应用程序内的特定位置或特定屏幕。 此后,您的项目需要在 Android 模拟器中重建。

在 React Native IOS 应用程序中配置深层链接

在 Xcode 中的 URL 类型下设置您的 URL 方案。 修改“AppDelegate”文件并在 iOS 模拟器中重建项目。 现在 iOS 项目已在 Xcode 中打开。

步骤#1 定义 URL Scheme

为您的应用程序定义自定义的 URL 方案。 此 URL 方案是您的应用程序获得识别的独特方式。 其他网站或应用程序将使用此唯一标识符来启动您的应用程序。

打开文件 info.plist。 在此文件的顶部添加一个新的 URL 类型。 可以在标识符和 URL 方案字段中输入 URL 方案。 然后展开项目 0(零),选择 URL Schemes,并命名项目 0。此名称是您的应用程序可链接的名称。 例如,您的应用名称是“OurApp”。 URL 方案将类似于“ourapp://”或“ourapp://detail?id=123”。

步骤#2 处理代码实现

现在,您需要实现处理深层链接的代码。 转到“AppDelegate”文件并添加处理方案的方法。 何时通过 URL 方案启动您的应用程序; 此方法将被调用。 此方法将接收 URL。 将从 URL 中提取必要的信息,并在您的应用程序中显示正确的屏幕。

步骤#3 测试

现在,需要测试深层链接。 为此,您可以使用工具 Safari 或支持深度链接概念的任何其他第三方应用程序。 例如,您正在使用 Safari。 在 Safari 中打开具有定义的 URL 方案的 URL。 此后,您的应用程序将以正确的屏幕启动。

步骤#4 通用链接处理

除了添加自定义 URL 方案外,您的应用还可以配置为支持通用链接(其他应用或网站使用的标准 HTTPS 链接)以启动您的应用。 这就是您需要处理通用链接的方式。 配置应用程序的权利。 然后,为通用链接处理创建相关代码,并在您的应用程序的委托中实现代码。

现在,您可以在 iOS 模拟器中重建您的项目。

最后的想法

我希望您现在已经精通脱钩的概念及其执行过程。 深度链接已成为当今应用程序的必需品。 但是,重要的是要以最专业的知识来执行深度链接的实施过程。 如果您缺乏技术专长或必要的资源,经验丰富的 React Native 应用开发公司可以帮助您毫不费力地完成深度链接的创建和执行过程。