React Native Android 开发环境搭建，只需4步

原文连接：
motalks.cn/2016/10/23/…

转载请注明来源。

本身在搭建 React Native Android 版开发环境的时候，参考了不少文章，发现多数文章提供的资料过于繁杂，对于一个常年用真机调试的 Android 开发者来讲，React Native 开发环境的搭建是能够更简单的。此文受用的对象是使用 Mac 以及真机调试的 Android 开发人员。最好确保你有个健全的网络（你懂的）。

在 Mac 的环境下，搭建 React Native Android 开发环境搭建只须要下面4步。

1. 安装 Homebrew 套件管理器
2. 安装 Node.js
3. 安装 React Native 的命令行工具
4. ANDROID_HOME 的环境变量配置

Homebrew

号称是 MacOS 不可或缺的套件管理器，反正就是你能够用它来下载安装 Node.js , React Native 命令行工具的工具。Homebrew 的中文介绍点这里。打开 Mac 终端，输入以下命令安装：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"复制代码

安装完成后输入：

brew -v复制代码

若显示出了 Homebrew x.x.x 则标识安装成功。 若是你不确认以前是否已经安装了 Homebrew 也可使用该命令来检测。

注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题："EACCES: permission denied" 。可使用下面的命令修复：

sudo chown -R `whoami` /usr/local复制代码

Node.js

这玩意官网的介绍是：一个基于 Chrome V8 引擎的 JavaScript 运行环境。从概念上讲就相似 Java 的 JRE 了。

接下来就可使用 Homebrew 来安装 Node.js 了，命令以下：

brew install node复制代码

React Native 中文网教程写到 “React Native须要NodeJS 4.0或更高版本，本文发布时Homebrew默认安装的是6.x版本，彻底知足要求。”

咱使用下面这个检查 Node.js 版本号的命令来验证下。

node -v复制代码

个人结果的是 v4.1.2 ，不知道是教程的问题仍是我安装时选择的不一样选项的问题。注：Node.js 官网也提供两个版本，一个是 LTS 长期提供支持的稳定版本，目前为 v4.6.0。另外一个是当前最新版本，目前为 v6.8.1。v4.1.2 好歹还能用，先不纠结这个，继续下一步。

React Native 的命令行工具（react-native-cli）

没什么好说的，React Native 的命令行工具用于执行建立、初始化、更新项目、运行打包服务（packager）等任务。安装命令以下：

npm install -g react-native-cli复制代码

环境变量配置

英文官网对 Android Studio 和 JDK 并无提出具体的版本要求，你们能够用本身现有的开发环境试试。

ANDROID_HOME 环境变量 ：确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。具体的作法是把下面的命令加入到~/.bash_profile文件中。而小数点开头的文件在Finder中是隐藏的，而且这个文件有可能并不存在。请在终端下使用sudo vi ~/.bash_profile命令建立或编辑。

关于 vi 操做，本身是真的不熟悉，如今摘录一段基本操做。以免你们在这浪费太多时间。进入 vi 编辑页面后，此时是出于命令行模式，是没法输入文字的。这时候按下 i 键，切换到—INSERT—模式，进行编辑操做。编辑完后，按 esc 键退出到命令行模式。按下 ：冒号键进入 Last line mode。输入 wq 进行存盘退出。

熟悉操做后，在 .bash_profile 文件中加入下面两行代码 ( 注：~表示用户目录，即/Users/你的用户名/ ) ，可使用echo $ANDROID_HOME检查此变量是否已正确设置。

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools复制代码

简单来讲，使用真机调试的同窗，React Native 开发环境就已经搭建完毕了。下面就能够进行 React Native 项目测试了。

测试你的第一个 React Native 项目

先初始化一个名为 AwesomeProject (可用任意名称替换 ) 的 RN 项目，后进入该项目的目录，输入运行命令等待部署运行便可。命令以下：

react-native init AwesomeProject 
cd AwesomeProject
react-native run-android复制代码

如今你已经成功的运行了第一个 RN 项目，咱们能够尝试下修改下。

在 AwesomeProject 文件夹下找到 index.android.js 文件，能够将 Hello, World 字符串改成任意字符，而后摇一摇手机，会出现配置菜单，选择 Reload js，你刚刚的修改就会立马生效。是否是已经体会到了 RN 的神奇了？

真机运行的注意事项以及你可能会遇到的问题

(Android 5.0及以上)使用adb reverse命令

注意，这个选项只能在5.0以上版本(API 21+)的安卓设备上使用。

首先把你的设备经过USB数据线链接到电脑上，并开启USB调试（关于如何开启USB调试，参见上面的章节）。

1. 运行adb reverse tcp:8081 tcp:8081
2. 不须要更多配置，你就可使用Reload JS和其它的开发选项了。

(Android 5.0如下)经过Wi-Fi链接你的本地开发服务器

1. 首先确保你的电脑和手机设备在同一个Wi-Fi环境下。
2. 在设备上运行你的React Native应用。和打开其它App同样操做。
3. 你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。
4. 摇晃设备，或者运行adb shell input keyevent 82，能够打开开发者菜单。
5. 点击进入Dev Settings。
6. 点击Debug server host for device。
7. 输入你电脑的IP地址和端口号（譬如10.0.1.1:8081）。在Mac上，你能够在系统设置/网络里找查询你的IP地址。
8. 回到开发者菜单而后选择Reload JS。

可能会遇到的问题

问题一

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unable to upload some APKs复制代码

解决办法：把项目中的~/android/app/build.gradle中的gradle版本改成1.2.3

问题二

摇一摇手机没办法出现 Reload Js 设置菜单

解决办法：在小米和魅族系统中只要在应用管理的权限管理中开启悬浮窗权限便可解决。

接下来的安排

React Native 集成到现有的 Android 项目

React Native 项目热更新

React Native 优化（包大小优化，预加载解决首次加载白屏等）