|
React Native实战（一）：配置和起步
2015 年 9 月 15 号，React Native for Android
发布。至此，React 基本完成了对多端的支持。基于 React / React Native 可以：
1.HTML5、Android、iOS 多端代码复用；
2.实时热部署。
在接下来的时间，我会通过一系列文章来介绍 React Native。本文介绍环境配置以及如何建立一个简单的项目。（注：本篇文章
iOS 和 Android 开发都适用。）
目前使用 React Native 开发只能在 Mac 系统 上进行。写 iOS 的同学，应该都是 Mac
（除了听说网易有些部门写 iOS 给黑苹果之外，哈哈哈哈）。 开发 Android 的同学, 如果公司配发的不是
Mac 的话，建议自己入手一个，能显著提高生产力，就当投资自己吧。我大阿里对 Android 开发也是不给
Mac 的（不知道公司什么思路，现在倒是可以申请 Mac air了，air的性能……），所以我也是自己买的。
环境配置
需要安装的有：
Homebrew
Homebrew 是 Mac 中的一个包管理器。没有安装的话，点击 这里安装，我的版本如下：
mac-2:~ srain$ brew -v
Homebrew 0.9.5 (git revision ac9a7; last commit 2015-09-21) |
版本过低将会导致无法安装后续几个组件。可用 brew update 升级。
Node.js 和 npm
Node.js 需要 4.0 及其以上版本。安装好之后，npm 也有了。
通过 nvm 安装 Node.js
nvm 是 Node.js 的版本管理器，可以轻松安装各个版本的 Node.js 版本。
安装 nvm 可以通过 Homebrew 安装：
或者按照 这里的方法安装。
然后安装 Node.js：
nvm install node && nvm alias default node |
也可以直接下载安装 Node.js： https://nodejs.org/en/download/
安装好之后，如下：
mac-2:react-native srain$ node -v
v4.0.0
mac-2:react-native srain$ npm -v
2.14.2 |
安装 watchman 和 flow
这两个包分别是监控文件变化和类型检查的。安装如下：
brew install watchman
brew install flow |
安装 React-Native
通过 npm安装即可：
npm install -g react-native-cli |
App开发环境的设置
iOS
XCode 6.3 及其以上即可。
Android
这个比较麻烦。
设置环境变量：ANDROID_HOME
export ANDROID_HOME=/usr/local/opt/android-sdk |
SDK Manager 安装以下包：
Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository
初始化一个项目
文档提到：
react-native init AwesomeProject |
初始化一个项目，其中 AwesomeProject 是项目名字，这个随意。等待一段时间之后（具体视网络情况而定），项目初始化完成。
进入到项目目录：
cd AwesomeProject
mac-2:AwesomeProject srain$ ls -l
total 24
drwxr-xr-x 14 srain staff 476 Sep 21 09:52 android
-rw-r--r-- 1 srain staff 1023 Sep 21 11:47 index.android.js
-rw-r--r-- 1 srain staff 1065 Sep 20 11:58 index.ios.js
drwxr-xr-x 6 srain staff 204 Sep 20 11:58 ios
drwxr-xr-x 5 srain staff 170 Sep 21 10:31 node_modules
-rw-r--r-- 1 srain staff 209 Sep 20 11:58 package.json |
其中 android 和 ios 中分别为两个平台的项目文件。index.android.js 和 index.ios.js
为两个页面对应的 js 文件。
运行项目
不管是 iOS 还是 Android，在开发调试阶段，都需要在 Mac 上启动一个 HTTP 服务，称为“Debug
Server”，默认运行在 8081 端口，APP 通 Debug Server 加载 js。
iOS 和 Android 的模拟器，连接 Mac 本机的服务都很方便。但是通过 USB 或者 WiFi
连接调试，就稍微麻烦一些了。
iOS
还是非常简单，XCode 打开项目，点击运行就好。修改 index.ios.js, 在模拟器中 ? +
R 重新载入 js 即可看到相应的变化。
iOS 真机调试也简单，修改HTTP地址即可。
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]; |
Android
按照官方文档，需要一个模拟器（Genymotion模拟器也可以）。但是不像 iOS，Android 开发平时更多是直接用真机进行开发和调试，如何运行部署到真机，下面会提到。
运行命令：
然后就会部署到模拟器，修改 index.android.js ，调出模拟器菜单键，选择重新载入 js
即可看到变化。
Android 真机调试
示例 App 直接部署到真机，红色界面报错，无法连接到 Debug Server。
如果是 5.0 或者以上机型，可通过 adb 反向代理端口，将 Mac 端口反向代理到测试机上。
adb reverse tcp:8081 tcp:8081 |
如果 5.0 以下机器，应用安装到测试机上之后，摇动设备，在弹出菜单中选择 Dev Setting >
Debug Server host for device，然后填入 Mac 的 IP 地址（ifconfig
命令可查看本机 IP）
关于修改 DevHelper 来进行和 iOS 一样的开发调试，后续关于热部署时，我会介绍到。
在 Android Studio 中调试开发
我们可能希望在 Android Studio 打开项目，然后编译部署到真机。
这个时候，在命令行启动 Debug Server 即可：
结论和后续
本篇文章，iOS 和 Android 都适用。至此，环境配置和示例项目运行应该都好了。
React Native实战（二）：Android的打包
关于打包
打包目的
除了热部署，我们知道，APP 运行的时候不应再从 Debug Server 获取资源。分发应用时 JS
资源应该被打包到 APP 中。
另外对外发布的安装包，资源中的业务代码的混淆也是必须的。
React Native 打包方式
目前 iOS 应用可用 react-native bundle 命令进行打包，同时对 Android
的支持工作也已经开始了。但在目前 npm 中最新的版本（0.11.4）暂时还不支持。 最新的代码中看似已经支持了，但还没最终发布。等正式发布支持了，我另写一篇文章介绍使用
react-native bundle 命令进行打包。
目前对于 Android 的 React Native 应用，可用 react-native-gradle
插件进行打包。该插件灵活配置打包参数，使用 Gradle Task 将资源打包到资源文件夹。
但 官方计划使用 react-native bundle 命令进行打包，并且有放弃对 Gradle 插件支持的倾向。
都使用 react-native bundle 进行打包，对开发人员来说，只要掌握一套打包命令即可。但是对于
Android 的开发者来说，插件方式似乎更符合平时的开发习惯。各位自行取舍。
React Native 开发目前非常活跃，代码变迭频繁，本文所讨论的代码版本为：
https://github.com/facebook/react-native/tree/0ff3a421c9adbe4137e07e158c9812062b34ea5a
本文中目前所指的时间为: 2015年09月28日20点，太平洋时间；中国2015年09月29日11点。
react-native-gradle 插件
编译插件
借助插件 react-native-gradle： com.facebook.react:gradleplugin:1.0.+可完成混淆及资源打包。
然而这个插件并没有发布到 JCenter 或者 Maven Centry。需要自己编译，然后发布到本地
Maven 库。源码在 react-native-gradle目录下。按照 文档编译安装：
mac-2:react-native-gradle srain$ gradle build install |
结果是测试用例报错，这个问题，官方一直没修复，且置之不理。 给出的解释前面提到了。
我们可跳过测试用例，直接安装。虽然官方提供的测试用例本身有问题，无法进行测试，但我亲测可用。
题外话，对于给出的解释，显得非常不讲究，目前整个项目处于高度活跃中，文档和实际功能严重脱节，很多不一致的地方。
看来任何团队都会面临项目压力，变得节奏不再优雅啊，所谓的理想团队都是瞬时态。
跳过测试用例，直接安装：
mac-2:react-native-gradle srain$ gradle install
安装完成：
mac-2:react-native-gradle srain$ ll ~/.m2/repository/com/facebook/react/gradleplugin/
total 8
drwxr-xr-x 5 srain staff 170 Sep 28 15:10 1.0.0-SNAPSHOT
-rw-r--r-- 1 srain staff 326 Sep 28 15:10 maven-metadata-local.xml |
在项目中使用
build.gradle 配置如下：
buildscript {
repositories {
mavenLocal() // 本地依赖
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:1.3.0'
classpath 'com.facebook.react:gradleplugin:1.0.+' // 插件依赖
}
} |
app/build.gradle：
apply plugin: 'com.facebook.react'
react {
bundleFileName "index.android.bundle" // assets 目录下 js 文件名
bundlePath "/index.android.bundle" // js 路径
jsRoot "../" // js 源文件位置
packagerHost "localhost:8081" // debug server 地址
packagerCommand "./node_modules/react-native/packager/packager.sh" // 打包命令地址
devParams {
skip true
dev true
inlineSourceMap false
minify false
runModule true
}
releaseParams {
skip false
dev false
inlineSourceMap false
minify true
runModule true
}
} |
配置说明
上面 react 项中的配置已经在注释中说明。其中，packagerCommand 官方给出的文档描述有误。
devParams 和 releaseParams 分别 debug 版本和
release 版本的参数。它们各有五个参数：
skip 参数为 true 则跳过从本地资源加载，从 Debug Server
请求资源。为 false 时从打包资源，运行时，从本地加载。
其他四个参数通过 url 传给 Debug Server。比如：http://localhost:8081/index.android.bundle?dev=true&inlineSourceMap=true&minify=false&runModule=true。
参数意义如下：
dev: 等同于全局变量 __DEV__, React Native 核心类库的开发选项。
minify: 混淆。
inlineSourceMap: 是否加入 source map。默认为
false。
runModule: 默认为 true，是否在最后以 require(XXX)
的形式加入 module 的入口点。如：
require("AwesomeProject/index.android.js");
参数的英文说明文档在： https://github.com/facebook/react-native/blob/master/packager/README.md
打包
每次打包，插件都会根据配置，决定是否打包以及以怎样的配置打包资源。
Demo
这里是一个 Demo： https://github.com/liaohuqiu/ReactNativeTestGradlePlugin。
Demo 主要演示了 build.gradle 的配置，用 Android Stuido 打开即可运行，不要修改
Dev Setting 中的 Debug Server，因为资源都已经打包，不再在从 Debug Server
下载。可以解开 debug.apk 看 assets 目录下的文件。
其中包含了一个编译安装 react-native-gradle 到本地 Maven 库的脚本，运行即可。
react-native bundle 命令简介
命令用法如下：
mac-2:AwesomeProject srain$ react-native bundle --help
Usage: react-native bundle [options]
Options:
--dev sets DEV flag to true，同插件配置的 dev
--minify minify js bundle，同插件配置的 minify
--root add another root(s) to be used in bundling
in this project
--assetRoots specify the root directories of app
assets
--out specify the output file， 输出文件的位置
--url specify the bundle file url，js bundle 路径 |
对 iOS 打包时：
react-native bundle --minify |
|
