react-native自定义原生组件

此文已由作者王翔授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

使用react-native的时候能够看到不少函数调用式的组件，像LinkIOS用来呼起url请求

 LinkIOS.openUrl('http://www.163.com');

actionSheetIOS用来实现ios客户端底部弹起的选择对话框

ActionSheetIOS.showActionSheetWithOptions({
  options: BUTTONS,
  cancelButtonIndex: CANCEL_INDEX,
  destructiveButtonIndex: DESTRUCTIVE_INDEX,
},
(buttonIndex) => {  this.setState({ clicked: BUTTONS[buttonIndex] });
});

这些组件的使用方式都大同小异，通过声明一个native module，然后在这个组件内部通过底层实现方法的具体内容

像ActionSheetIOS在使用的时候，首先需要在工程的pod库中添加ActionSheetIOS对应的RCTActionSheet

pod 'React', :path => 'node_modules/react-native', :subspecs => ['Core','RCTActionSheet'# Add any other subspecs you want to use in your project]

我们可以看到RCTActionSheet相关的实现的代码是放在react-native/Libraries/ActionSheetIOS下的

整个工程包含3个代码文件，ActionSheetIOS.js、RCTActionSheetManager.h、RCTActionSheetManager.m

ActionSheetIOS.js内容很简单,先是定义了引用oc代码的方式

var RCTActionSheetManager = require('NativeModules').ActionSheetManager;

然后定义了ActionSheetIOS组件，并export

var ActionSheetIOS = {
  showActionSheetWithOptions(options: Object, callback: Function) {
    invariant(      typeof options === 'object' && options !== null,      'Options must a valid object'
    );
    invariant(      typeof callback === 'function',      'Must provide a valid callback'
    );
    RCTActionSheetManager.showActionSheetWithOptions(
      {...options, tintColor: processColor(options.tintColor)},
      callback
    );
  },
  .....,

};module.exports = ActionSheetIOS;

我们看到关键是引入底层oc的方式，其他的跟写前端没啥差别

然后再看RCTActionSheetManager的实现

#import "RCTBridge.h"@interface RCTActionSheetManager : NSObject@end

主要是实现了RCTBridgeModule这个协议，这个协议是实现前端js-》oc的主要中间件，感兴趣的可以看看实现，

然后就是对RCTActionSheetManager的实现的代码，关键几句

@implementation RCTActionSheetManager
{
// Use NSMapTable, as UIAlertViews do not implement // which is required for NSDictionary keys
NSMapTable *_callbacks;}

RCT_EXPORT_MODULE()
...
RCT_EXPORT_METHOD(showActionSheetWithOptions:(NSDictionary *)options
                  callback:(RCTResponseSenderBlock)callback)
{
  ...
}

主要是RCT_EXPORT_MODULE用来注册react-native module ，然后具体的实现方法放在RCT_EXPORT_METHOD开头的函数内

RCT开头的宏用来区分react-native函数与原声的函数，jspatch的bang有过具体分析，感兴趣的可以看看

http://blog.cnbang.net/tech/2698/

所以我们自己实现一个原生的react-native组件的时候，完全可以照着actionSheetIOS来做

在前端自定义一个js，通过require('NativeModules').XXX 引入

然后在底层实现RCTBridgeModule的类，在类里把RCT_EXPORT_MODULE、RCT_EXPORT_METHOD加上即可

网易云免费体验馆，0成本体验20+款云产品！ 

更多网易技术、产品、运营经验分享请点击

相关文章：
【推荐】 3分钟掌握一个有数小技能：回头客分析