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));