链接

介绍

每个好的网站都以前缀为前缀https://，https这就是所谓的URL方案。不安全的网站以URL 为前缀http://，http是URL方案。我们简称为计划。

要从一个网站导航到另一个网站，您可以<a>在网络上使用锚标记（）。您也可以使用window.history和等的JavaScript API window.location。

除此之外https，您可能也熟悉该mailto方式。当您打开带有该mailto方式的链接时，您的操作系统将打开已安装的邮件应用程序。如果您安装了多个邮件应用程序，那么您的操作系统可能会提示您选择一个。同样，有拨打电话和发送短信的方案。阅读下面有关内置URL方案的更多信息。

https并http通过浏览器来处理，但它可以通过使用不同的URL方案链接到其他应用程序。例如，当您从Slack收到“Magic Link”电子邮件时，“Launch Slack”按钮是一个带有href的锚标签，类似于：slack://secret/magic-login/other-secret。与Slack一样，您可以告诉操作系统您要处理自定义方案。阅读有关配置方案的更多信息。当Slack应用程序打开时，它会收到用于打开它的URL，然后可以对通过URL提供的数据进行操作 - 在这种情况下，是一个将用户登录到特定服务器的秘密字符串。这通常被称为深度链接。详细了解如何在您的应用中处理深层链接。

 深层链接不是唯一可用的链接工具。常规HTTPS链接通常需要在移动设备上打开您的应用程序。例如，如果您要发送有关记录更改的通知电子邮件，则不希望在电子邮件中的链接中使用自定义URL方案，因为这样会在桌面上断开链接。相反，您希望使用常规HTTPS链接，例如https://www.myapp.io/records/123，在移动设备上，您希望该链接打开您的应用。iOS将此概念称为“通用链接”，Android将其称为“深层链接”; Expo在两个平台上都支持这些链接（有一些配置）。Expo还支持与Branch的延迟深度链接。

从您的应用链接到其他应用

内置URL方案

正如介绍中所提到的，每个平台上都存在一些核心功能的URL方案。以下是非详尽列表，但涵盖了最常用的方案。

mailto打开邮件应用程序，例如： mailto: support@expo.io✅✅

tel打开手机应用，例如： tel:+123456789✅✅

sms打开短信应用，例如： sms:+123456789✅✅

https / http打开网络浏览器应用，例如： https://expo.io✅✅

从您的应用中打开链接

React Native中没有锚标记，所以我们不能写<a href="https://expo.io">，而是我们必须使用Linking.openURL。

import{Linking}from'react-native';

Linking.openURL('https://expo.io');

通常，如果没有用户请求，您就不会打开URL - 这是一个简单Anchor组件的示例，它会在按下时打开URL。

import{Linking,Text}from'react-native';exportdefaultclassAnchorextendsReact.Component{_handlePress=()=>{Linking.openURL(this.props.href);this.props.onPress&&this.props.onPress();};render(){return(<Text{...this.props}onPress={this._handlePress}>{this.props.children}</Text>);}}// <Anchor href="https://google.com">Go to Google</Anchor>// <Anchor href="mailto://support@expo.io">Email support</Anchor>

使用Expo.WebBrowser而不是Linking打开Web链接

以下示例说明了打开Web链接与Expo.WebBrowser.openBrowserAsyncReact Native 之间的区别Linking.openURL。通常WebBrowser是一个更好的选择，因为它是您的应用程序中的模式，用户可以轻松地关闭它并返回到您的应用程序。

打开其他应用的链接

如果您知道另一个应用程序的自定义方案，您可以链接到它。有些服务提供深层链接的文档，例如Lyft深层链接文档描述了如何直接链接到特定的拾取位置和目的地：

lyft://ridetype?id=lyft&pickup[latitude]=37.764728&pickup[longitude]=-122.422999&destination[latitude]=37.7763592&destination[longitude]=-122.4242038

用户可能没有安装Lyft应用程序，在这种情况下，您可能想要打开App / Play商店，或让他们知道他们需要先安装它。对于这些情况，我们建议使用库react-native-app-link。

在iOS上，Linking.canOpenURL需要其他配置来查询其他应用的链接方案。您可以使用ios.infoPlist密钥app.json来指定应用程序需要查询的方案列表。例如：

"infoPlist": {"LSApplicationQueriesSchemes": ["lyft"]}

如果未指定此列表，Linking.canOpenURL则false无论设备是否安装了应用程序，都可能会返回。请注意，此配置只能在独立应用程序中进行测试，因为它需要在Expo Client中进行测试时不会应用的本机更改。

链接到您的应用

在Expo CLI中

在继续之前，值得花点时间学习如何在Expo客户端中链接到您的应用程序。Expo客户端使用该exp://方案，但如果我们exp://之后没有任何地址链接，它将打开应用程序到主屏幕。

在开发过程中，您的应用会像网址一样生活exp://wg-qka.community.app.exp.direct:80。当它被部署时，它将在一个URL上exp://exp.host/@community/with-webbrowser-redirect。如果您创建一个包含类似链接的网站<a href="exp://expo.io/@community/with-webbrowser-redirect">Open my project</a>，然后在您的设备上打开该网站并单击该链接，它将在Expo客户端中打开您的应用。您也可以使用其他应用程序链接到它Linking.openURL。

在一个独立的应用程序中

要链接到独立应用，您需要为应用指定方案。您可以app.json通过在scheme密钥下添加字符串来注册您的方案：

{"expo": {"scheme": "myapp"}}

构建独立应用程序并将其安装到设备后，您就可以通过链接打开它myapp://。

如果您的应用程序被弹出，请注意，与其他部分一样app.json，scheme在应用程序已经弹出后更改密钥将无法获得所需的效果。如果您想要在弹出的应用中更改深层链接方案，请参阅本指南。

Expo.Linking 

为了省去根据您所处的环境和硬编码网址插入一堆条件的麻烦，我们在Linking模块的扩展中提供了一些辅助方法。当您想要提供一个需要重定向回应用程序的网址的服务时，您可以调用Expo.Linking.makeUrl()它，它将解析为以下内容：

在Expo客户中发布的应用：exp://exp.host/@community/with-webbrowser-redirect

独立发布的应用程序：myapp://

发展：exp://wg-qka.community.app.exp.direct:80

您还可以通过传递可选参数来更改返回的URL Expo.Linking.makeUrl()。您的应用将使用这些来接收数据，我们将在下一节中讨论这些数据。

处理链接到您的应用程序

有两种方法可以处理打开您的应用的网址。

1.如果应用程序已经打开，应用程序将被预先启用并触发链接事件

你可以用这些事件处理Linking.addEventListener('url', callback)。

2.如果应用程序尚未打开，则会打开该应用程序并将URL作为initialURL传入

您可以使用Linking.getInitialURL- 它返回一个Promise解析为url的事件（如果有的话）。

请参阅以下示例以查看这些示例。

通过URL将数据传递到您的应用

要将某些数据传递到您的应用中，您可以将其作为路径或查询字符串附加到您的网址上。Expo.Linking.makeUrl(path, queryParams)将自动为您构建一个工作URL。你可以像这样使用它：

letredirectUrl=Expo.Linking.makeUrl('path/into/app',{hello:'world',goodbye:'now'});

这将返回类似于myapp://path/into/app?hello=world&goodbye=now独立应用程序的东西。

使用深层链接打开应用程序时，您可以解析链接Expo.Linking.parse()以获取传入的路径和查询参数。

当处理用来打开/前景您的应用程序的URL，它会是这个样子：

_handleUrl=url=>{this.setState({url});let{path,queryParams}=Expo.Linking.parse(url);alert(`Linked to app with path: ${path} and data: ${JSON.stringify(queryParams)}`);};

如果您打开了类似的URL myapp://path/into/app?hello=world&goodbye=now，则会发出警报Linked to app with path: path/into/app and data: {hello: 'world', goodbye: 'now'}。

示例：从WebBrowser链接回您的应用程序

示例项目examples / with-webbrowser-redirect演示了如何处理WebBrowser查询字符串中的重定向和从中获取数据。在世博会上试一试。

示例：使用链接进行身份验证

链接到您的应用程序的常见用例是在打开WebBrowser后重定向回应用程序。例如，您可以打开登录屏幕的Web浏览器会话，当用户成功登录后，您可以使用该方案将您的网站重定向回您的应用程序，并将身份验证令牌和其他数据附加到URL。

注意：如果尝试使用Linking.openURL打开Web浏览器进行身份验证，那么Apple可能会因为用户体验不佳或令人困惑而拒绝您的应用。WebBrowser.openBrowserAsync以模态打开浏览器窗口，看起来感觉很好并且获得Apple批准。

要查看使用WebBrowserFacebook进行身份验证的完整示例，请参阅examples / with-facebook-auth。目前Facebook身份验证要求您部署一个小型网络服务器以重定向回您的应用程序（如示例中所述），因为Facebook不允许您重定向到自定义方案，Expo正在制定一个解决方案，以使您更容易。在世博会上试一试。

WebBrowser可以在expo / auth0-example中找到用于身份验证的另一个示例。

通用/深层链接（没有自定义方案）

常规HTTPS链接（没有自定义URL方案）通常需要在移动设备上直接打开您的应用。这允许您发送通知电子邮件，其中包含在桌面上的Web浏览器中按预期工作的链接，同时在移动设备上打开应用程序中的内容。iOS将此概念称为“通用链接”，而Android将其称为“深层链接”（但在本节中，我们专门讨论不使用自定义URL方案的深层链接）。

iOS上的通用链接

要在iOS上实施通用链接，您必须先设置您拥有自己域名的验证。这是通过从您的网络服务器提供Apple App Site Association（AASA）文件来完成的。AASA必须由/apple-app-site-association或/.well-known/apple-app-site-association（没有延期）提供。AASA包含JSON，用于指定您的Apple应用程序ID以及您的域中应由移动应用程序处理的路径列表。例如，如果您希望https://www.myapp.io/records/123移动应用程序打开该格式的链接，则您的AASA将具有以下内容：

{"applinks": {"apps": [],"details": [{"appID": "LKWJEF.io.myapp.example","paths": ["/records/*"]}]}}

这告诉iOS https://www.myapp.io/records/*应该由您的移动应用程序直接打开任何指向（与记录ID的通配符匹配）的链接。有关AASA格式的更多详细信息，请参阅Apple的文档。Branch提供了一个AASA验证器，可以帮助您确认您的AASA已正确部署并具有有效格式。

请注意，iOS会在您首次安装应用程序时以及从App Store安装更新时下载您的AASA，但不会再频繁刷新。如果您希望更改AASA中的生产应用程序路径，则需要通过App Store发布完整更新，以便所有用户的应用程序重新获取AASA并识别新路径。

部署AASA后，您还必须配置应用以使用关联的域。首先，您需要将associatedDomains 配置添加到您的app.json。其次，您需要在Apple开发人员门户上编辑您的App ID并启用“Associated Domains”应用程序服务。将服务添加到App ID后，您还需要重新生成配置文件。

此时，打开移动设备上的链接现在应该打开您的应用程序！如果没有，请重新检查前面的步骤以确保您的AASA有效，路径在AASA中指定，并且您已在Apple开发人员门户中正确配置了您的App ID。一旦您的应用程序打开，请转到处理链接到您的应用程序部分，以获取有关如何处理入站链接的详细信息，并向用户显示他们请求的内容。

Android上的深层链接

在Android上实现深层链接（没有自定义URL方案）比在iOS上更简单。您只需添加intentFilters到Android的部分你的app.json。以下基本配置将使您的应用程序在标准Android对话框中显示为处理任何记录链接的选项myapp.io：

"intentFilters": [{"action": "VIEW","data": [{"scheme": "https","host": "*.myapp.io""pathPrefix": "/records"},],"category": ["BROWSABLE","DEFAULT"]}]

您的域的链接可能需要始终打开您的应用程序（不向用户显示可以选择浏览器或其他处理程序的对话框）。您可以使用Android应用链接实现此功能，Android应用链接使用与iOS上的Universal Links类似的验证流程。首先，您必须在/.well-known/assetlinks.json指定应用ID时发布JSON文件，以及应由您的应用打开哪些链接。有关格式化此文件的详细信息，请参阅Android的文档。第二，添加"autoVerify": true到你的意图过滤器app.json; 这告诉Android检查您assetlinks.json的服务器并将您的应用程序注册为指定路径的自动处理程序：

"intentFilters": [{"action": "VIEW","autoVerify": true,"data": [{"scheme": "https","host": "*.myapp.io""pathPrefix": "/records"},],"category": ["BROWSABLE","DEFAULT"]}]

何时不使用深层链接

这是设置深入链接到您的应用的最简单方法，因为它需要最少量的配置。

主要问题是，如果用户没有安装您的应用程序并且使用其自定义方案跟随指向您应用程序的链接，则他们的操作系统将指示该页面无法打开但不提供更多信息。这不是一次很棒的经历。无法在浏览器中解决此问题。

此外，许多消息传递应用程序不会使用自定义方案自动链接URL - 例如，exp://exp.host/@community/native-component-list可能只是在浏览器中显示为纯文本而不是链接（exp：//exp.host/@community/native-component-list） 。

一个例子是Gmail从大多数应用程序的链接中删除href属性，使用的技巧是链接到常规https url而不是应用程序的自定义方案，这将打开用户的Web浏览器。浏览器通常不会剥离href属性，因此您可以在线托管文件，将用户重定向到应用程序的自定义方案。

因此，您可以链接到https://example.com/redirect-to-app.html而不是链接到example：// path / into / app，并且redirect-to-app.html将包含以下代码：

<script>window.location.replace("example://path/into/app");</script>