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 脚本。

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

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

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

sudo chown -R $USER /usr/local

cd /usr/local

git fetch

git reset --hard origin/master

brew update

2.使用brew来安装nvm

brew install nvm

这里可能会报如下错误：

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

sudo chown -R $USER /Library/Caches/Homebrew/

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

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

export NVM_DIR=~/.nvm 

source $(brew --prefix nvm)/nvm.sh

3.安装Node.js

nvm install node && nvm alias default node

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

下载链接

4.安装watchman和flow

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

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

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

brew install watchman

brew install flow

5.安装PCRE

brew uninstall pcre && brew install pcre

 

 

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

brew update && brew upgrade

4.开始Hello World

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

/*react-native-cli是完成剩余安装的命令行工具。

  它是通过 npm 安装的。会在终端里面安装react-native这个命令行，并且只需需做一次即可。

  如果这句说是权限不足，开头加上sudo*/

npm install -g react-native-cli

/*获取React Native的源代码和依赖包，

  然后在AwesomeProject/iOS/AwesomeProject.xcodeproj创建一个新的Xcode项目，

  并且在AwesomeProject/android/app下面创建一个gradle项目*/

react-native init AwesomeProject

运行结果：

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

cd AwesomeProject

react-native run-android

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

export ANDROID_HOME=$HOME/android-sdk

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

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

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

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

react-native start

点击模拟器的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 的机器。