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

本文为翻译文章，原文地址为：

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