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静态库开发

1. 打开Xcode
2. Create a new Xcode project

3. 相关步骤如下图:
   

   

4. 将项目保存至react-native-demo文件夹下

5. 设置静态库Header Search Paths（如下图）， 以便可以搜索到react-native库

然后进行build静态库库

1. 将静态库RNDemo中的RNDemo.h做以下修改，以测试是否能够引用node_modules目录下的React Native库文件. (正常引用)
   

   并将RNDemo.m文件做以下修改(后续测试使用)
   

2. 打开我们创建的reactNativeDemo/ios 下的iOS项目

3. 添加我们刚才制作的静态库,步骤如下
   1、添加静态库项目

   

   

   2、添加静态库依赖

4. 接下来对react-native-demo里的index.js做以下修改
   

   第一行代码是获取原生模块，是根据导出的模块的类名获取
   接下来用export导出函数，调用后执行testDemo方法，即在静态库中的RNDemo.m导出的方法

5. 然后在index.ios.js中import该模块，并执行方法，代码如下
   

6. 使用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