React Native 原生模塊開發筆記 (Android/iOS)

目錄：

環境 :
Mac Xcode WebStorm Android Studio
node v6.4.0
react-native-cli: 1.0.0
react-native: 0.33.0

一、創建RN項目，作為插件開發的調試環境
二、創建RN模塊
三、iOS靜態庫開發
四、Android模塊開發

一、創建RN項目

$ react-native init reactNativeDemo
$ cd reactNativeDemo
$ react-native run ios

二、創建RN模塊

進入項目根目錄，執行以下命令:
$ mkdir custom_modules 
$ cd custom_modules 
$ mkdir react-native-demo //創建自定義模塊react-native-demo
$ cd react-native-demo
$ touch index.js  //創建接口文件 
$ npm init //初始化npm, 生成package.json 務必將main字段設置為接口文件路徑

三、iOS靜態庫開發

打開Xcode Create a new Xcode project

相關步驟如下圖:

將項目保存至react-native-demo文件夾下

設置靜態庫Header Search Paths（如下圖）， 以便可以搜索到react-native庫

然後進行build靜態庫庫<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPr2rvrLMrL/iUk5EZW1v1tC1xFJORGVtby5o1/bS1M/C0N64xKOs0tSy4srUyse38cTcubvS/dPDbm9kZV9tb2R1bGVzxL/CvM/CtcRSZWFjdCBOYXRpdmW/4s7EvP4uICjV/bOj0v3Twyk8YnIgLz4NCjxpbWcgYWx0PQ=="這裡寫圖片描述" src="/uploadfile/Collfiles/20160916/20160916093558585.png" title="\" />

並將RNDemo.m文件做以下修改(後續測試使用)

打開我們創建的reactNativeDemo/ios 下的iOS項目

添加我們剛才制作的靜態庫,步驟如下
1、添加靜態庫項目

2、添加靜態庫依賴

接下來對react-native-demo裡的index.js做以下修改

第一行代碼是獲取原生模塊，是根據導出的模塊的類名獲取
接下來用export導出函數，調用後執行testDemo方法，即在靜態庫中的RNDemo.m導出的方法

然後在index.ios.js中import該模塊，並執行方法，代碼如下

使用Xcode運行ios項目，成功打印test message, 即證明靜態庫可以與js進行通信

四、Android模塊開發
開發過程中，發現Android Studio不能夠直接創建module, 又因項目通過Gradle構建(gradle自行查閱文檔學習)，因此可以通過直接創建文件的形式來創建Android模塊,結構如下

其中build.gradle內容如下

清單文件AndroidManifest.xml內容如下

---

使用Android Studio打開reactNativeDemo/android 項目

---

設置android項目依賴，引入react-native-demo下的android模塊(上面創建的目錄)，具體設置如下

設置build.gradle

設置settings.gradle

---

完成以上步驟之後，進行點擊如下圖按鈕，刷新 gradle

異步成功之後，項目react-native-demo被成功鏈接

另外我們還需要build以下react-native-demo, 選中react-native-demo進行build，如圖

---

為react-native-demo 的android模塊寫代碼

---

在reactNativeDemo/android 的MainApplication添加包依賴

---

在AndroidStudio裡運行項目,並在index.android.js文件裡導入react-native-demo並測試 （結果：成功打印test message）

---

進階

自己封裝的原生插件: react-native-progresshub