此文已由作者王翔授權網易雲社區發布。
歡迎訪問網易雲社區，了解更多網易技術產品運營經驗。
使用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+款雲產品！
更多網易技術、產品、運營經驗分享請點擊
相關文章：
【推薦】 OBS源碼編譯開發
【推薦】 測試環境docker化—容器集群編排實踐