ReactNative 实战之本地交互:如何在应用中添加本地分享按钮

王下邀月熊_Chevalier

本文为翻译文章,原文地址为:

Adding a native iOS "Share" button to a React Native app

笔者正在开发一个自己的React Native应用,其中碰到了一个小的功能点,即添加一个本地的第三方分享的按钮。这是一个非常细节的功能点,因此并没有被容纳到默认的框架中。不过,框架提供了一些列本地的Objective-C与上层互相调用的接口,很容易即可实现如下的功能:

How it works in iOS(iOS本地的实现)

iOS本地端是使用了UIActivityViewController这个控件,它提供了简单的模态对话框的功能,可以显现在屏幕的底端,进行一些预定义的操作。对于UIActivityViewController的用法还是比较简单的,用如下代码即可以构造一个简单的分享弹出框:

- (IBAction)shareButton:(UIBarButtonItem *)sender
{
    NSString *textToShare = @"Look at this awesome website for aspiring iOS Developers!";
    NSURL *myWebsite = [NSURL URLWithString:@"http://www.codingexplorer.com/"];
 
    NSArray *objectsToShare = @[textToShare, myWebsite];
 
    UIActivityViewController *activityVC = [[UIActivityViewController alloc] initWithActivityItems:objectsToShare applicationActivities:nil];
 
    NSArray *excludeActivities = @[UIActivityTypeAirDrop,
                                   UIActivityTypePrint,
                                   UIActivityTypeAssignToContact,
                                   UIActivityTypeSaveToCameraRoll,
                                   UIActivityTypeAddToReadingList,
                                   UIActivityTypePostToFlickr,
                                   UIActivityTypePostToVimeo];
 
    activityVC.excludedActivityTypes = excludeActivities;
 
    [self presentViewController:activityVC animated:YES completion:nil];
}

对于如何在本地端构造并且弹出一个分享模态窗口这边不做赘述,但是需要讨论的是,应该以UIView的方式弹出还是以切换UIViewController的方式弹出该窗口。我的第一反应是去查看 React 的官方文档,这里面他们解释了怎么将一个本地的控件封装为React的形式。我的方法也是将分享窗体这个所在的UIView显示出来并且以我们需要的方式进行呈现。不过上文中也提及了,这里需要调用的一个UIViewController而不是一个UIView。

How to call the Share dialog from a native module

因此还是打算用切换UIViewController而不是将某个分享的页面嵌入到React元素中的方式,创建一个本地的模块还是非常简单的,就如下图所示:

初始化代码的模板如下所示:

//
//  RCTShareManager.h
//
 
#import <RCTBridgeModule.h>
 
@interface RCTShareManager : NSObject <RCTBridgeModule>
@end

 

//
//
//  RCTShareManager.m
//
 
#import "RCTShareManager.h"
 
@implementation RCTShareManager
 
RCT_EXPORT_MODULE();
 
RCT_EXPORT_METHOD(shareURL:(NSString *)URLString)
{
    // Some native code
}
 
@end

最终shareURL这个方法的接口是如下方式暴露到了JavaScript中:

var React = require('react-native');
var ShareManager = React.NativeModules.ShareManager;
 
// Somewhere in your component...
 
function onPress(){
    ShareManager.shareURL(someURL);
};

在本地代码中,可以按照如下方法将UIActivityViewController结合进来:

//
//  RCTShareManager.m
//
 
#import "RCTShareManager.h"
@import UIKit;
 
@implementation RCTShareManager
 
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(shareURL:(NSString *)URLString)
{
    NSArray *objectsToShare = @[[NSURL URLWithString:URLString]];
    UIActivityViewController *activityVC = [[UIActivityViewController alloc] initWithActivityItems:objectsToShare applicationActivities:nil];
 
    UIViewController *rootController = UIApplication.sharedApplication.delegate.window.rootViewController;
 
    [rootController presentViewController:activityVC animated:YES completion:nil];
}
 
@end

不过如果按照上面说的这样处理之后,XCode会报如下错误:

This application is modifying the autolayout engine from a background thread, which can lead to engine corruption and weird crashes.  This will cause an exception in a future release.

并且经过较长时间之后,屏幕会如下所示:

这是因为React Native是在后台线程执行了代码,而iOS默认是只允许主线程进行前端界面的渲染,因此,我们需要将页面渲染这一部分放置到主线程中进行:

RCT_EXPORT_METHOD(shareURL:(NSString *)URLString)
{
    NSArray *objectsToShare = @[[NSURL URLWithString:URLString]];
    UIActivityViewController *activityVC = [[UIActivityViewController alloc] initWithActivityItems:objectsToShare applicationActivities:nil];
 
    UIViewController *rootController = UIApplication.sharedApplication.delegate.window.rootViewController;
 
    dispatch_async(dispatch_get_main_queue(), ^{
        [rootController presentViewController:activityVC animated:YES completion:nil];
    });
}
阅读 7.7k

某熊的全栈之路
知识,应该在它该在的地方。一个热爱代码,热爱新技术的程序熊。

爱代码 爱生活 希望成为全栈整合师

22.4k 声望
8.5k 粉丝
0 条评论

爱代码 爱生活 希望成为全栈整合师

22.4k 声望
8.5k 粉丝
文章目录
宣传栏