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 : [email protected]
主要是實現了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+款雲產品！
更多網易技術、產品、運營經驗分享請點選
相關文章：
【推薦】 canvas 動畫庫 CreateJs 之 EaselJS（下篇）
【推薦】 【專家坐堂】四種併發程式設計模型簡介