学习 React Native for Android：环境搭建

学习 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
搜索 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
    Hello World

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

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

1
Hello World!

改成

1
Hello HaHack!

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

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 重新加载应用的界面。

Comments

▲