React Native Linking

最近，我嘗試實如今 React Native APP 中調用瀏覽器打開連接的功能，現記錄一下實現過程。
React Native 的 Linking API 提供了一個通用的接口來與傳入和傳出的 App 連接進行交互，例如瀏覽器。

若是要在 App 啓動後也監聽傳入的 App 連接

1. Linking Libraries (iOS) - RCTLinking

在 node_modules/Libraries/LinkingIOS 中找到 RCTlinking.xcodeproj，拖到 XCode 工程下的 Libraries 分組裏（參考 Linking Libraries - Manual linking）
若是XCode 工程下的 Libraries 分組裏已經有 RCTlinking.xcodeproj，就不須要再加了。

2 AppDelegate.m 文件中添加

// iOS 9.x or newer
#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 or older
#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];
}

// Universal Links
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity
 restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler
{
 return [RCTLinkingManager application:application
                  continueUserActivity:userActivity
                    restorationHandler:restorationHandler];
}

使用 Linking

import { Linking } from 'react-native'

若是 APP 被其註冊過的外部 url 調起

componentDidMount() {
  Linking.getInitialURL().then((url) => {
    if (url) {
      console.log('Initial url is: ' + url);
    }
  }).catch(err => console.error('An error occurred', err));
}

監聽事件

componentDidMount() {
  Linking.addEventListener('url', this._handleOpenURL);
},
componentWillUnmount() {
  Linking.removeEventListener('url', this._handleOpenURL);
},
_handleOpenURL(event) {
  console.log(event.url);
}

打開連接 url

若是系統不知道如何處理給定的 URL，則{@code openURL}方法會調用失敗。若是你傳入的 URL 不是一個 http 連接，則最好先經過{@code canOpenURL}方法檢查一下。

對於 web 連接來講，協議頭("http://", "https://")不能省略！

Linking.openURL(url).catch((err) => console.error('An error occurred', err));

Linking.canOpenURL(url)
  .then((supported) => {
    if (!supported) {
      console.log("Can't handle url: " + url);
    } else {
      return Linking.openURL(url);
    }
  })
  .catch((err) => console.error('An error occurred', err));