学习 React Native for Android 的开发环境搭建。

Facebook 于 2015 年 9 月 15 日发布了 React Native for Android 。React Native 让开发者使用 JavaScript 和 React 编写应用,利用相同的核心代码就可以创建 Web,iOS 和 Android 平台的原生应用。注意这里的 核心 两个词,它指的是那些底层的、与界面无关的逻辑。与 ionic / PhoneGap 这类 Web App 开发框架不同,React Native 主张使用 React 的开发方式来开发 Native 应用,因为在现阶段 Web App 还无法达到 Native App 的体验。所以,React Native 并不强调 write Once, run everywhere ,而是 learn once, write everywhere :上层使用 JS 和 React 开发不同平台的 UI,下层则可以编写能够复用的核心代码,从而大幅提高开发效率。

关于 React Native 的好处,唐巧在 《谈谈 React Native》 里已经有比较深刻的总结,本文不再赘述。本文将作为一个 React Native for Android 学习系列的一个开篇,从零开始学习 React Native 。我尽量不偷懒,保证文章及时更新。

准备工作

  1. 操作系统:当前仅支持 OS X;
  2. 由于 atom 的 package 服务 apm 国内不可用,因此国内的朋友需要做好 Cross the Wall 的准备。

基本开发环境搭建

安装 Homebrew

Homebrew 是一个方便开发者在 MAC OS X 系统上面安装 Linux 工具包的 ruby 脚本,如果你的机器还没有安装 Homebrew ,则需要执行下面的命令安装:

1
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

完成后可以试试执行 brew -v 检查下 brew 是否安装成功。

如果你的机器已经安装过 Homebrew ,强烈建议 对 Homebrew 的包做一下更新:

1
$ brew update && brew upgrade

安装 Node.js

建议使用 Node 的版本管理器 nvm 来安装新版本的 Node.js 。

安装 nvm

首先需要安装 nvm 。官方推荐的做法是通过 curl 或者 wget 来安装:

通过 curl 安装

1
2
$ brew install curl # 确保安装了 curl
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

通过 wget 安装

1
2
$ brew install wget # 确保安装了 wget
$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

完成后可以试试执行 nvm --version 检查下 nvm 是否安装成功。

安装 Node.js

使用 nvm 安装 Node.js:

1
$ nvm install node && nvm alias default node

安装 watchman

watchman 是 Facebook 的一个用于监控文件变更并触发指定操作的工具:

1
$ brew install watchman

安装 flow

Flow 是一个 JavaScript 的静态类型检查器,建议安装它,以方便找出代码中可能存在的类型错误:

1
$ brew install flow

安装 Android SDK

如果你之前已经装过 Android SDK ,打开 Android SDK Manager,确保如下工具和开发包已经安装:

SDK:

  • Android SDK Build-tools version 23.0.1
  • Android 6.0 (API 23)
  • Android Support Repository

模拟器:

  • Intel x86 Atom System Image (for Android 5.1.1 - API 22)
  • Intel x86 Emulator Accelerator (HAXM installer)

如果之前没有装过 Android SDK ,可以通过如下步骤安装:

  1. 安装最新的 JDK.
  2. 使用 brew install android-sdk 来安装安卓 SDK。
  3. 将它添加到 ~/.bashrc, ~/.zshrc 或者任何其他您的 shell 所使用的路径:export ANDROID_HOME=/usr/local/opt/android-sdk
  4. 启动一个新的 shell 并且运行 android ,在出现窗口中勾选上面列出的 SDK 和模拟器。
  5. 点击 “Install Packages”。

详细介绍可以参考 这篇文章

安装 React Native

最后到了关键一步,安装 React Native:

1
$ npm install -g react-native-cli

至此完成 React Native 基本开发环境的搭建。

Nuclide IDE 的安装和配置(可选)

Nuclide 是 Facebook 专门为 React 开发的 IDE ,既然是官方提供的 IDE ,就意味着拥有更好的语法补全、类型检查等支持。为了开发效率,不妨尝试一下这个 IDE 。

安装 Atom

本质上,Nuclide 其实是在 Atom 的基础上提供的一系列插件集。要使用 Nuclide ,首先需要先安装 Atom 。Atom 是 Github 所推出的一个开源编辑器,其最大的特点是使用 node.js 来作为其插件语言。

Atom的官网下载 Atom 并安装。

安装 Nuclide

安装完 Atom 后,打开 Settings 面板,并点击 Install 选项卡,然后在搜索框中键入 nuclide-installer ,如图所示:

搜索 nuclide-installer

第一个结果就是我们需要安装的插件,点击该插件旁边的蓝色 Install 按钮进行安装。

另一种方法是直接利用 Atom 的包管理器 apm 安装:

1
$ apm install nuclide-installer

完成后重启一下 Atom ,Atom 就会开始完成对 Nuclide 所有插件的下载安装,这个过程可能耗时比较长。完成后可以再次进入 Setting 面板,并点击 Packages 选项卡,你将可以看到一堆的 Nuclide- 开头的插件。

为了方便编译 React Native 的工程,建议再安装一个终端插件,用于快速打开终端并定位到当前项目根路径。根据你的操作系统版本选择安装如下插件之一:

  • atom-terminal:适合 Mac OSX 10.9 (Mavericks) 及以下的操作系统;
  • atomerinal:atom-terminal 在 Mac OSX Yosmite 和 EI Capitan 下不能准确定位路径,这个插件是对 atom-terminal 的 fork 和修改,适合版本更高的操作系统;

其他推荐插件

除了 Nuclide 之外,还可以根据你的需求安装其他的一些插件,这里推荐一些插件:

  • react:React 的语法补全和智能重排;
  • react-snippets:React 的代码段;
  • highlight-selected:高亮当前双击选中的标记;
  • jshint:检查 JavaScript 的语法,支持 JSX (需要在插件设置中开启 Support Linting JSX);
  • emmet:用 emmet (Zen Coding)方式快速编写页面;
  • save-session:让 Atom 记住上一次打开的会话;
  • browser-plus:在 Atom 中内嵌一个浏览器窗口,方便页面调试(其实 Atom 本身就是一个浏览器);
  • minimap:如果你对 Sublime Text 的 minimap 念念不忘;
  • atomic-emacs:Emacs 键盘布局,适合 Emacs 用户使用;
  • vim-mode:Vim 键盘布局,适合 Vim 用户使用。

但要注意,Atom 目前的性能还比较差强人意,安装太多的插件会影响整个编辑器的启动速度,所以建议只安装必需的插件。

第一个小程序:AwesomeProject

执行如下命令生成一个工程:

1
$ react-native init AwesomeProject

该命令将会下载 React Native 工程源码和依赖,生成的工程文件如下图所示:

生成的示例工程

仔细观察这个工程,你会发现如下的内容:

  • node_modules 文件夹,这是 Node.js 用来存放和管理 npm 包的文件夹,现在这里包含了 React Native 框架。
  • index.android.js 文件和 index.ios.js 文件。这是 React Native CLI 工具分别为 Android 和 iOS 创建的空壳应用。
  • android 文件夹和 ios 文件夹。包含了用于生成两个平台的 App 的 Bootstrap 型项目。

现在打开 Atom ,点击 File 菜单的 【Add Project Folder…】 菜单项,导入 AwesomeProject 工程文件夹,如下图所示:

通过终端插件快速打开终端(快捷键是 Alt + Shift + t),然后执行如下命令运行 Android 应用程序:

1
$ react-native run-android

React Native 会开始构建这个工程,同时会启动 Running Packager 用于调试。如下图所示:

如果 Running Packager 提示 “Packager can’t listen on port 8081” ,说明 8081 端口被占用,可以检查是什么程序占用了这个端口并杀掉它:

1
2
$ sudo lsof -n -i4TCP:8081 | grep LISTEN
$ kill -9 <进程id>

构建完成后,手机或模拟器将会自动运行这个 App 。如果你看到的是这样的画面:

你还需要进行如下设置:

  1. 更新 brew 和 watchman :brew update && brew upgrade watchman
  2. 摇动手机或按下菜单按钮呼出菜单,然后点击 【DeviceID Settings】 菜单项进入应用的选项界面,再点击 【Debug server host for device】 选项,填入你的 Mac 主机的 ip ;
  3. 完成后重启一下应用,或者回到主界面再次呼出菜单,点击 【Reload JS】 。应用就会开始抓取主机上的 JS Bundle 并显示如下的界面: Hello World

我们的第一个应用就成功执行起来了!

现在试试对我们的工程做点改动。在 Atom 下打开 index.android.js 文件,并将第 20 行附件的

1
Hello World!

改成

1
Hello HaHack!

然后再次呼出菜单,点击 【Reload JS】 刷新下界面,此时界面中的 Hello World! 就变成了 Hello HaHack!

Hello HaHack

小技巧

添加 Alias

React Native 运行一个 App 的命令有点长,可以为其编写一些 Alias ,节省时间,方便记忆。将下面两行代码添加到你的 Shell 配置文件中(.bashrc.zshrc):

1
2
alias rna="react-native run-android"
alias rni="react-native run-ios"

完成后重新打开终端,即可使用 rna 命令运行 React Native for Android 项目,用 rni 命令运行 React Native for iOS 项目。

自动刷新界面

如果希望每次修改 JS 脚本后自动刷新应用的界面,可以再次进入应用的选项界面,把 【Auto reload on JS Change】 选项打开:

这样当 watchman 发现你的 JS 文件发生更改时,就会让 Running Packager 重新加载应用的界面。