了解React Native中的深度链接

前端小工
640 阅读10分钟

简介

深度链接和通用链接是进入你的应用程序的门户。深度链接已经是任何移动应用应该具有的无缝体验的一部分。最终，它们有助于减少用户的流失，提高用户群的忠诚度。正确实施它们将直接影响到你在应用中掌握活动和运行促销的能力。

深度链接的问题在今天和以前一样重要，特别是考虑到广告商识别器（IDFA）和越来越多的墙内花园。执行良好的深层链接将使你的重定向活动成为可能，并将参与度提高到一个新的水平，让终端用户在网络和你的应用程序之间拥有无缝的一键式体验。

一旦用户发现你的应用并安装了它，深层链接就成为将新获得的用户留在你的应用中的完美工具。

在这篇文章中，我概述了如何实现深度链接的现有方法，以及如何使用React Native Typescript代码库来测试它。

你可以在GitHub上找到这个项目的完整源代码。

什么是深度链接，为什么它很重要？

深度链接，简而言之，是一种将用户从一个网页重定向到你的应用程序的方式，以便显示一个特定的屏幕和所要求的内容。它可以是一个产品，一篇文章，付费墙后面的安全内容，或一个登录屏幕。

最著名的例子之一是他们向你的电子邮件发送的Slack链接，该链接在应用程序内被打开，授权你用你的账户使用它--不需要密码。

Screenshot of Slack magic link

深度链接在2021年是最重要的。引导你的用户进入应用程序并提高他们的参与度的每一项努力都将在很大程度上取决于基于深度链接之上的策略。

总结一下为什么深层链接很重要的要点。

  • 营销活动
  • 用户保留
  • 网页和手机之间的无缝重定向
  • 付费墙或登录认证后的内容交付
  • 延长客户的生命周期
  • 提高忠诚度
  • 最大限度地减少客户流失
  • 提高搜索引擎的排名

实施深度链接需要对iOS和Android有更复杂的理解，以便在你的React Native项目中对每个平台进行额外配置。

以下面这个URL的语法图为例。

billing-app://billing/1

Diagram of URL scheme
每当你使用例如reactivelions.com，导航到一个网站时，你就会使用一个URL，其中的URL方案是 "https"。在上面的例子中，billing-app 是你的深度链接URL的URL方案。

iOS中的深度链接和通用链接

从iOS 9开始，苹果引入了通用链接，以减少混乱并简化用户体验。

使用通用链接背后的想法是将与你网站上的内容相匹配的特定网站URL与你的应用程序内的内容相连接。这个URL的作用与我在上一节中展示的深度链接URL相同。

https://app.reactivelions.com/billing/3

配置通用链接需要在服务器端和移动端都有额外的步骤。

首先，你从服务器端开始，你需要上传一个JSON格式的文件，定义网站与移动应用程序的关联以及它的具体路线。

假设你运行example.com域名，你想创建一个关联文件。首先在你的根域.well-known ，创建一个文件夹或一个路由，然后在apple-app-site-association 内添加JSON内容。

https://example.com/.well-known/apple-app-site-association

添加JSON内容来定义网站关联。

{
   "applinks": {
       "apps": [],
       "details": [
           {
               "appID": "ABCD1234.com.your.app",
               "paths": [ "/billing/", "/billing/*"]
           },
           {
               "appID": "ABCD1234.com.your.app",
               "paths": [ "*" ]
           }
       ]
   }
}

如何配置您的Xcode项目

为了演示深度链接是如何工作的，我们将建立一个简单的测试应用程序。这个应用程序将使用@react-navigation 组件在Home 和Billing 屏幕之间进行直接的导航。

npx react-native init BillingApp --template

打开您的Xcode工作区。

open BillingApp/ios/BillingApp.xcworkspace

Screenshot of Xcode workspace
在你的Xcode窗口中，在左窗格中选择你新创建的项目（在我们的例子中是BillingApp）。接下来，在新打开的内部视图的左窗格中选择BillingApp目标，为BillingApp.xcodeproj 。

导航到该视图顶部中间的信息部分，然后到最下面，点击URL类型下的加号**（+）。确保添加billing-id作为你的新标识符**，并指定URL方案为billing-app。

通过上面的这些步骤，你已经启用了iOS项目配置，以便以后在你的Objective C和JavaScript代码中使用深层链接，如billing-app://billing/4 。

在配置完Xcode后，下一步将专注于React Native。我将从链接React Native核心的一部分开始，称为LinkingIOS 。你可以在这里的官方文档中阅读更多关于它的信息。它的主要目标是构建一个桥梁，使一个JavaScript线程能够从你的应用程序的本地部分接收更新，你可以在下面的AppDelegate.m 部分阅读更多信息。

转到ios**/Podfile**，在target下添加这一行。

pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'

然后确保使用这个命令来更新你的pods。

cd ios && pod install

下一步是使你的应用程序的主要入口点能够控制当应用程序通过深度链接被打开时被调用的回调。

在这种情况下，我们用选项实现函数openURL ，并通过其本地模块RCTLinkingManager ，将其上下文传递给RCTLinkingManager 。

#import <React/RCTLinkingManager.h>

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

对于通用链接，我们将需要实现一个回调函数continueUserActivity ，它也将通过RCTLinkingManager ，将应用程序和当前通用链接的上下文传递给JavaScript上下文。

- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}

Android中的深度链接

与iOS相比，Android深度链接的工作方式略有不同。这种配置是在Android Intents的基础上进行的，是对要执行的操作的抽象。大部分的配置都存储在AndroidManifest.xml下，并且在执行深层链接时实际指向哪个Intent将被打开。

如何配置你的Android Studio项目

在你的Android清单android/app/src/main/AndroidManifest.xml ，我们需要做以下工作。

  • 配置Intent 过滤器
  • 定义主要的View 行动并指定两个主要类别：DEFAULT 和BROWSABLE
  • 通过将方案设置为billing-app ，并将主路由定义为 ，来最终完成配置。billing

这样Android就会知道这个应用为这个路由配置了深度链接billing-app://billing/* 。

<intent-filter android:label="filter_react_native">
 <action android:name="android.intent.action.VIEW" />
 <category android:name="android.intent.category.DEFAULT" />
 <category android:name="android.intent.category.BROWSABLE" />
 <data android:scheme="billing-app" android:host="billing" />
</intent-filter>

导航和深度链接

在大多数生产级别的应用程序中，你最终会有多个屏幕，而且你很可能最终使用某种形式的组件来为你实现这种导航。然而，你可以选择退出，通过直接调用Linking ，通过JavaScript调用React Native的核心库，使用没有导航上下文的深度链接。

你可以在你的React Native代码中使用这两种方法来做到这一点。

  1. 如果应用程序已经打开。
Linking.addEventListener('url', ({url}) => {})
  1. 如果应用程序还没有打开，并且你想获得初始URL，使用这个调用。
Linking.getInitialURL()

根据你的应用程序的逻辑，使用获得的深度链接URL来显示不同的内容。

如果你使用@react-navigation ，你可以选择使用其路由逻辑来配置深度链接。

为此，你需要为通用链接和深度链接定义你的prefixes 。你还需要将config 与它的screens ，包括嵌套的屏幕，如果你的应用程序有很多屏幕并且非常复杂的话。

下面是一个例子，说明这种配置在我们的应用程序中是怎样的。

import { NavigationContainer } from '@react-navigation/native';
export const config = {
 screens: {
   Home: {
     path: 'home/:id?',
     parse: {
       id: (id: String) => `${id}`,
     },
   },
   Billing: {
     path: 'billing/:id?',
     parse: {
       id: (id: String) => `${id}`,
     },
   },
 },
};
const linking = {
 prefixes: ['https://app.reactivelions.com', 'billing-app://home'],
 config,
};
function App() {
 return (
   <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
     {/* content */}
   </NavigationContainer>
 );
}

在上面的代码部分，我们介绍了通用链接，并走过了在你的网站服务器端定义通用链接关联所需的步骤。在安卓系统中，有一个类似的东西，叫做验证安卓应用链接。使用安卓应用链接可以帮助你避免与其他不属于你的应用程序打开深层链接的混乱情况。安卓通常建议使用浏览器打开未经验证的深度链接，只要它不确定这些链接是否是App Links（而不是深度链接）。

要启用App Links验证，你将需要像这样在你的清单文件中改变意图声明。

<intent-filter android:autoVerify="true">

要创建应用验证的链接，您将需要生成一个JSON验证文件，该文件将被放置在与Xcode部分相同的.well-known 文件夹中。

keytool -list -v -keystore my-release-key.keystore

这个命令将通过用您的keystore文件签署配置来生成与您的域名的关联。

[{  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.mycompany.app1",
    "sha256_cert_fingerprints":
    ["14:6D:E9:83:C5:73:06:50:D8:EE:B9:95:2F:34:FC:64:16:A0:83:42:E6:1D:BE:A8:8A:04:96:B2:3F:CF:44:E5"]
  }
}]

然后使用这个路径将生成的文件放置到您的网站。

https://www.example.com/.well-known/assetlinks.json

如何测试深度链接

在经历了所有的配置和实现之后，你要确保你已经正确地设置了一切，并且深度链接在你选择的每个平台上都能工作。

在你测试通用链接或安卓应用验证链接之前，确保你的每个域的所有JSON文件都已上传，可用，并且是最新的。根据你的网络基础设施，你甚至可能要刷新你的内容交付网络（CDN）缓存。

一个成功的深层链接测试意味着，在浏览器中打开深层链接后，你被转发到你的应用程序，你可以看到所需的屏幕上的给定内容。

当你进入计费屏幕时，你可以指定一个数字，应用程序将呈现相同数量的表情符号与飞舞的美元纸币。我们的应用程序有Home 和Billing 屏幕。

如果你试图从你的Home 屏幕转到Billing 屏幕，它不会传递任何内容，因此它不会渲染任何表情符号。

在你的终端，你可以使用这些命令来测试每个平台的深度链接。通过改变你的深度链接URL末尾的数字来玩玩，看看不同数量的表情符号。

  1. iOS
npx uri-scheme open billing-app://billing/5 --ios

你也可以打开Safari浏览器，在地址栏输入billing-app://billing/5 ，然后点击进入。

Screenshot of billing app in iOS with dollar sign emojis

  1. 安卓系统
npx uri-scheme open billing-app://billing/5 --android

Screenshot of billing app in Android with dollar sign emojis

接下来的步骤

你可能已经注意到，我使用TypeScript来编写这个项目的代码。对于这个项目，我实现了自定义的属性类型，需要为每个屏幕进行自定义声明。查看props.ts可以看到这些类型的声明。

正如我前面提到的，如果你正在构建一个生产级的应用程序，你很可能最终会构建复杂的路由，并且需要用你的导航器库实现嵌套路由。

嵌套导航将使你能够把每个屏幕分解成更小的组件，并根据你的业务逻辑拥有子路由。在这里了解更多关于使用@react-navigation 构建嵌套路由的信息。

期待看到你用它来构建的东西!

The postUnderstanding deep linking in React Nativeappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝