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分鐘掌握一個有數小技能：回頭客分析