React Native Linking

栏目: 服务器 · 发布时间: 2个月前

来源: segmentfault.com

本文转载自:https://segmentfault.com/a/1190000019185992,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

最近,我尝试实现在 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,就不需要再加了。

React Native Linking

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

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

以上所述就是小编给大家介绍的《React Native Linking》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

为你推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

React Native开发指南

React Native开发指南

[美]艾森曼 / 黄为伟 / 人民邮电出版社 / 2016-6-1 / CNY 59.00

本书通过丰富的示例和详细的讲解,介绍了React Native这款JavaScript框架。在React Native中利用现有的JavaScript和React知识,就可以开发和部署功能完备的、真正原生的移动应用,并同时支持iOS与Android平台。除了框架本身的概念讲解之外,本书还讨论了如何使用第三方库,以及如何编写自己的Java或Objective-C的React Native扩展。一起来看看 《React Native开发指南》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具