Linking
Linking
提供了一个通用的接口来与传入和传出的 App 链接进行交互。
Every Link (URL) has a URL Scheme, some websites are prefixed with https://
or http://
and the http
is the URL Scheme. Let's call it scheme for short.
In addition to https
, you're likely also familiar with the mailto
scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about built-in URL schemes below.
Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a Magic Link email from Slack, the Launch Slack button is an anchor tag with an href that looks something like: slack://secret/magic-login/other-secret
. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to get the deep link into your app.
Custom URL scheme isn't the only way to open your application on mobile. You don't want to use a custom URL scheme in links in the email because then the links would be broken on desktop. Instead, you want to use a regular https
links such as https://www.myapp.io/records/1234546
. and on mobile you want that link open your app. Android calls it Deep Links (Universal Links - iOS).
Built-in URL Schemes
As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
Scheme | 说明 | iOS | Android |
---|---|---|---|
mailto | Open mail app, eg: mailto: support@expo.io | ✅ | ✅ |
tel | Open phone app, eg: tel:+123456789 | ✅ | ✅ |
sms | Open SMS app, eg: sms:+123456789 | ✅ | ✅ |
https / http | Open web browser app, eg: https://expo.io | ✅ | ✅ |
基本用法
启用 Deep Links
If you want to enable deep links in your app, please the below guide:
- Android
- iOS
要了解更多如何在 Android 上支持深度链接的说明,请参阅Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links.
如果要在现有的 MainActivity 中监听传入的 intent,那么需要在AndroidManifest.xml
中将 MainActivity 的launchMode
设置为singleTask
。相关解释可参考<activity>
文档。
<activity
android:name=".MainActivity"
android:launchMode="singleTask">
注意: 对于 iOS 来说,如果要在 App 启动后也监听传入的 App 链接,那么首先需要在项目中链接
RCTLinking
,具体步骤请参考手动链接这篇文档,然后需要在AppDelegate.m
中增加以下代码:
// iOS 9.x 或更高版本
#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}
// iOS 8.x 或更低版本
#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
如果你的 app 用了 Universal Links,需要正确的把下述代码添加进去:
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}
处理 Deep Links
There are two ways to handle URLs that open your app.
1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
You can handle these events with Linking.addEventListener('url', callback)
-- it calls callback({ url })
with the linked URL
2. If the app is not already open, it is opened and the url is passed in as the initialURL
You can handle these events with Linking.getInitialURL()
-- it returns a Promise that resolves to the URL, if there is one.
示例
Open Links and Deep Links (Universal Links)
- TypeScript
- JavaScript
Open Custom Settings
- TypeScript
- JavaScript
获取 Deep Link
- TypeScript
- JavaScript
发送 Intents (Android)
- TypeScript
- JavaScript
文档
方法
addEventListener()
static addEventListener(
type: 'url',
handler: (event: {url: string}) => void,
): EmitterSubscription;
Add a handler to Linking changes by listening to the url
event type and providing the handler.