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分钟掌握一个有数小技能：回头客分析