最近把 Aurora-IMUI 的 UI 庫支持到 React Native 上，其中開發(fā)過程中走了一些彎路，這里做個分享。
（Gif 錄制效果不太好。。。。）現(xiàn)已經同時支持 iOS，Android 歡迎 PR。
如何在 React Native 中使用 OC 編寫的 UI 庫
如果你的原生代碼使用 OC 代碼來實現(xiàn)的那么參考這個教程就能滿足你的需求 iOS 原生UI組件。
如何把 Swift 編寫的 UI 庫以模塊的方式提供
如果你的類庫使用 Swift 來實現(xiàn)的，如果你想把它以一種模塊方式提供給開發(fā)者，看完本篇教程你就懂了（下面內容假設你已經看過這篇文章 iOS 原生UI組件）。
- 要讓 OC 使用 Swift 中的類庫，需要
#import "youProjectName-Swift.h"這個頭文件，這樣就可以在 OC 中使用 Swift 定義的類庫了可以參考這篇文章。 - 這里希望這個庫打包成模塊，這樣開發(fā)者使用起來會更加方便。
- 新建工程，用于編譯模塊如圖所示
由于 Swift 代碼只能打包成 Framework。所以需要把所有 Swift 代碼打包成 framework，。好的試試把所有的代碼打包到 framework 里面。但是這樣會有問題，程序運行的時候應用并沒有把這個模塊加載到模塊列表中。
看下 RCT_EXPORT_MODULE() 的代碼，實際代碼如下。
RCT_EXTERN void RCTRegisterModule(Class);
+ (NSString *)moduleName { return @"";
}
+ (void)load {
RCTRegisterModule(self);
}
// RCTBridge.m
static NSMutableArray<Class> *RCTModuleClasses;
void RCTRegisterModule(Class);
void RCTRegisterModule(Class moduleClass)
{
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
RCTModuleClasses = [NSMutableArray new];
});
RCTAssert([moduleClass conformsToProtocol:@protocol(RCTBridgeModule)],
@"%@ does not conform to the RCTBridgeModule protocol",
moduleClass);
// Register module
[RCTModuleClasses addObject:moduleClass];
}
這段代碼的意思是 load 代碼的時候會把這個模塊類加載到 ReactNative 的全局 模塊隊列 RCTModuleClasses 中。
如果我們的模塊代碼在 framework 中那么就不能加到這里面去，既然如此，我們就可以在新建一個 TARGET , 單獨編譯我們的模塊代碼（包含 RCT_EXPORT_MODULE() 代碼的類）如下圖所示。
這樣模塊類就能成功的加載到 ReactNative 中的模塊類列表了。
這里只是列出主要的方法， 過程中肯定會出現(xiàn)各種報錯，這些自行 google 都好解決。
