Android React Native装配指南

概述

本文所讲述均在mac下安装，有windows下办公需求的同学，可以去这里：

1.http://bbs.react-native.cn/topic/10/%E5%9C%A8windows%E4%B8%8B%E6%90%AD%E5%BB%BAreact-native-android%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83

2.http://blog.csdn.net/u011068702/article/details/49448043

好的，言归正传。下面开始在mac下安装RN。

1.安装Homebrew

Homebrew 是一个方便开发者在 MAC OS X 系统上面安装 Linux 工具包的 ruby 脚本。

如果执行上面的命令报下图的错误，说明你的系统之前已经安装过Homebrew了。

安装过的可以尝试更新一下：

2.使用brew来安装nvm

这里可能会报如下错误：

因为缺少/Library/Caches/Homebrew这个目录的权限，输入下面的命令：

nvm安装完成，接下来会提示说是把nvm加入到环境变量中：

在.bash_profile中加入下面两行，然后source执行一遍。

3.安装Node.js

坑：官方命令打不开，老老实实下载客户端安装吧。

下载链接

4.安装watchman和flow

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

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

后面的安装没有啥问题，按照官方文档来就可以：

5.安装PCRE

?

?

最后，最好执行一下如下命令，更新相关软件:?

4.开始Hello World

环境安装好了，迫不及待的来 Hello world。运行如下几条命令，直接可以生成一个样例项目：

运行结果：

插上手机或是模拟器，最好是5.0以上的系统，进入AwesomeProject目录下，开始运行：

这里会用Gradle来编译。编译过程中有可能会出现 Android sdk 找不到，Build tools 版本找不到的错误。这是因为 RN for Android 需要环境变量，在.bash_profile中加入：

同时需要需要 Build-tools version 23.0.1，API 23 等，安装好就可以正常编译了。

但是再次运行，模拟器出现如下状况：

通常正常情况下会自动安装安装 APK 包并运行，与此同时会打开一个终端运行 dev server。

但我们发现这里并不能自动运行 dev server，你可以在当前项目目录中运行如下命令来手动启动 server：

点击模拟器的RELOAD JS按钮，出现下图。终于成功了，哭了。接下来就可以开始 React Native 之旅了。

?

在 Android 端，在?AwesomeProject?里面运行?react-native run-android?来在你的模拟器设备上面安装生成的应用，并且开启允许代码实时渲染的 Node 服务器。为了看到你的更改你必须打开震动菜单（摇动你的设备或者按住设备上面的菜单按钮，在模拟器上面按住 F2 或者 Page Up，在 Genymotion 上面按住 ?+M），然后点击?Reload JS。

注意

1. 确保相关工具和 Android SDK 都是最新的；
2. 因为 React Native for Android 提示错误和开发菜单都是通过悬浮窗显示的，要注意的 ROM 有没有自作聪明的帮你默认禁用掉了显示悬浮窗的权限；
3. RN需要启动一个Dev server 来辅助开发，Android 5.0 可以直接通过 USB 的访问，5.0 以下只能通过 WiFi 来访问。为了便于开发，还是建议使用 5.0 的机器。