ReactNative: 结合工程的思考

闲言碎语

自从 FB 开源了 ReactNative, 受到大家的追捧.
仿佛看到了跨平台的真正曙光.

---

说句实在话, 学习 ReactNative 的成本还是比较大的.
什么 Node.js, JavaScript, ES6,还有一堆的管理和使用工具.
至少你还得懂至少一门平台知识, 否则无法展示你牛逼的才华.

如果你想在移动 App 领域长期发展, 那需要学习的东西就更多了.

---

不管怎么样, 饭, 还是要一口一口的吃! 路, 还是要一步一步走.

今天跟大家分享一下, 如何结合自己的项目来集成 ReactNative 这个框架.

---

使用 RN, 可能有下面几种情况:

1.项目刚立项, 尚未开始搭建框架.
2.项目已经开始, 但是只有一个平台 iOS 或者 Android 在开发, 另一个平台处于待命状态.
3.项目已经上线, 迭代了好几个版本了,iOS 和 Android 都有上线.

上面的几种情况是实际工作中很常见的模式.

那么, 引入ReactNative有几种方式呢, 我结合自己的项目经验, 罗列了如下几种:

1.直接型.
2.cocoapods | gradle
3.混合型(copy + 1 | 2)

直接型

react-native init直接创建工程.

搭建好环境后, 使用react-native init命令来直接创建工程.
具体可以参考 文档.

这种方式简单直接.
这种方式,也是写第一个 RN 程序的入门操作.

cocoapods | gradle

使用 cocoapods 来管理 iOS 开发的库.
使用 gradle 来管理 Android 开发的库.

使用这种方式的好处是使用工具来管理和配置 RN, 方便且不易出错.
不好的地方是不能及时的使用 RN 的最新版本.

这里以 iOS 工程为例子, 大概的操作步骤如下:

1.cd 到已有的项目下面
2.写 package.json
3.执行 npm install. 下载和安装node_modules.
4.pod init创建 Podfile
5.在 Podfile 中写入相关的 RN 库.
6.执行 pod install. 安装 RN 库.
7.touch index.ios.js创建入口文件.写入相关代码.

具体的操作可以参考 这里, 异常的清晰明了.

关于 Android 上面的 gradle 操作可以参考 这里.

混合型(copy + 1 | 2)

结合直接型和 cocoapods|gradle 的模式, 对已有工程进行 RN 的植入.

copy + 1

使用直接型创建和现有工程同名的项目. 将原来的平台代码分别 copy 到新项目的 ios 和 android 目录.

这种模式, 比较适合已有上线或者开发即将上线的项目(已有 Android 和 iOS 两个平台).

当然, 如果你愿意也可以改造为 cocoapods 或者 gradle 管理的模式.

copy + 2

使用 cocoapods 或者 gradle 分别引入 RN 框架. 将原来的平台代码分别 copy 到新项目的 ios 和 android
目录. 进行简单的平台的文件配置和梳理即可.

这种模式, 比较适合已有上线或者开发即将上线的项目(已有 Android 或者 iOS 某个平台).

---

针对这几种模型, 可以为你的项目引进 ReactNative 了.

撸吧, 猿们!