最近把 Aurora-IMUI 的 UI 庫支持到 React Native 上，其中開發(fā)過程中走了一些彎路，這里做個分享。

（Gif 錄制效果不太好。。。。）現已經同時支持 iOS，Android 歡迎 PR。

如何在 React Native 中使用 OC 編寫的 UI 庫

如果你的原生代碼使用 OC 代碼來實現的那么參考這個教程就能滿足你的需求 iOS 原生UI組件。

如何把 Swift 編寫的 UI 庫以模塊的方式提供

如果你的類庫使用 Swift 來實現的，如果你想把它以一種模塊方式提供給開發(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 中的模塊類列表了。

這里只是列出主要的方法， 過程中肯定會出現各種報錯，這些自行 google 都好解決。