React Native支援在其基礎上編寫原生程式碼, 具有訪問平臺所有的能力.在日常開發中,github上很多的RN元件已經滿足了大家的使用.如果有不支援你需要的原生特性的需求出現,就需要自己該特性的封裝.

參考rn中文網.在React Native中，一個“原生模組”就是一個實現了“RCTBridgeModule”協議的Objective-C類，其中RCT是ReaCT的縮寫.

本文按照一個呼叫本地通訊錄的示例來說明.

大家需要新建一個靜態檔案庫

元件名稱MailList  在.h檔案中

.m檔案

為了實現RCTBridgeModule協議，你的類需要包含RCT_EXPORT_MODULE()巨集。這個巨集也可以新增一個引數用來指定在Javascript中訪問這個模組的名字。如果你不指定，預設就會使用這個Objective-C類的名字。

在這裡我們指定改類名

然後我們需要宣告給Javascript匯出的方法，宣告通過RCT_EXPORT_METHOD()巨集來實現：

我是把需要js傳遞的引數放入字典中了, 如果沒有引數

RCT_EXPORT_METHOD(getMailList:(RCTResponseSenderBlock)sucessCallback :(RCTResponseSenderBlock)failCallback)

{

   //寫入你呼叫原生通訊錄的程式碼

   //展示原生通訊錄介面 需要你獲取當前的控制器 , 然後把通訊錄介面展示在當前控制器上

}

然後再靜態庫中配置路徑

路徑輸入 $(SRCROOT)/../../react-native/React, 選擇recurvise

然後我們新建一個資料夾名稱

按照官方命名規範,外掛名稱都是小寫.

然後再該資料夾中,需要我們新建一個iOS資料夾和一個index.js檔案

iOS 資料夾放入你寫的外掛內容

index.js 匯出該外掛

package.json 通過npm init 自動生成.

然後我們可以將該外掛複製到RN工程 的node_modules中

然後大家通過react-native link  xxx(外掛全稱) 命令整合進工程中,

也可以手動匯入,在Libraries中 選擇Add Files to "工程名", 選擇node_modules中要匯入的外掛mailList.xcodeproj新增進來,

然後Build Phases中新增靜態.a檔案進去

最終我們在RN工程中可以通過js呼叫