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

本文翻译自React Native: Things I wish I knew before starting out.，从属于笔者的ReactNative 入门与最佳实践系列文章。

React Native 是个非常优秀的项目，不过鉴于其仍处于不断地演进开发中，我们可能阅读到的很多的教程里的信息还是面向旧版本的。本文就是记录了些根据笔者的日常开发总结而来的你应该格外注意而又没有在文档中强调的细节要点。我会尽可能地在版本迭代之后更新本文的内容，不过还是要强调下本文编写于 React Native v0.33(2016 年 9 月)。

rnpm link

rnpm 已经被集成到了 react-native 命令行工具中，可以直接通过react-native link命令运行。不要单独的安装 rnpm，它已经被弃用了。很多第三方的插件乃至于 官方文档 都没有提及这点。

自定义字体？你并不需要编辑 Android/iOS 项目

这一点好像也没有在文档之中并没有详细提及，不过根据这里描述的，我们并不需要编辑 Android/iOS 项目来添加自定义字体。我们只需要在项目的根目录下创建新的assets文件夹，拖入你所需要用的字体文件，然后在你的package.json中添加如下配置:

"rnpm": { "assets": ["assets"] },

然后，执行react-native link命令，该命令不仅会将第三方模块的原生代码链接入 Android/iOS 项目，还会将字体等文件移动至相应的目录中。然后你就可以通过设置fontFamily来使用安装好的字体。不过有时候使用react-native link并不能如人所愿，此时你可以参考下react-native-video这里的一些教程。 另外，需要注意的是目前 RN 中只支持 font-weights 与 styles 为 bold 与 italic，RN 会自动搜索 yourFamilyName_bold.ttf 与 yourFamilyName_italic.ttf。

RN 中集成了不少非标准的 Babel Plugins

React 与 RN 本身已经集成了不少的 Babel Plugins，你的代码可以直接使用这些 Plugins，不过很多文档中并没有提及这些 Plugins，我觉得了解有哪些 Plugins 还是很有意义的。

Flow

Flow是 Facebook 出品的静态类型的语言，很类似于微软的TypeScript。所谓静态类型语言即使当你在初始化某个变量的类型之后你并不能再改变它的类型，类似于熟悉的 C#、Java 等等这些语言，这一特性有助于我们编写安全可控的代码。一个简单的 Flow 的例子如下所示:

function foo(argument1: string, argument2: number): string {
    argument1 = 0; // this will fail when running flow
    argument2 = 0; // but this won't!return 1; // this however, will - you guessed it - fail.
}

Flow 官网上建议在代码的首部添加// @flow，不过根据测试因为 RN 中已经内置了合适的 Plugins，其可以完成自动的转化。

ES7 Class Properties

RN 内部也已支持ES7 Class Properties，也就意味着你不需要写如下复杂的代码:

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.thisIsAField = 1;
    }
}
MyComponent.propTypes = {
    firstname: React.PropTypes.string,
    lastname: React.PropTypes.string
};

而可以写成这样:

class MyClass {
    thisIsAField = 1;
    static propTypes = {
        firstname: React.PropTypes.string,
        lastname: React.PropTypes.string
    };
}

Object Spread Operator

Object Spread Operator可以使得对象的合并更加方便，类似于 Array Spread Operator，我们可以使用...来解构某个对象，譬如:

// Rest propertieslet { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }// Spread propertieslet n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }