最近,我尝试实现在 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));
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。