React Native 在 Mac OS 系统下的环境配置

这里建议大家看英文版的安装文档，因为有一些步骤中文版的和英文版的不一样。下面以 react-native 官方提供的例子来分别说一下 android 和 ios 的环境配置过程。

一、必须安装的软件

无论是 android 还是 ios 都需要安装下面的软件。

Homebrew

Mac 系统的包管理器，用于安装 NodeJS 和一些其他必需的工具软件。可以查看官网链接，在控制台中输入下面的一条命令即可：

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

检查是否安装成功：

brew -v

之后控制台会输出 Homebrew 的版本信息：

1
2
3

yanmengdeiMac:~ yanmeng$ brew -v
Homebrew 1.3.3
Homebrew/homebrew-core (git revision 94fe; last commit 2017-09-25)

Node 和 Watchman

Watchman 是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

上一步我们已经安装了 Homebrew，那 Node 和 Watchman 就可以用它来安装了。具体命令如下：

1 2	brew install node brew install watchman

注意：请确保你的 node 版本号在 4 及其以上版本。

二、安装 React Native 和示例项目

安装 React Native

在 bash 中执行下面的命令：

1	npm install -g react-native-cli

安装项目文件

在 bash 中执行下面的命令：

1 2	react-native init AwesomeProject cd AwesomeProject

三、安装工具

1、IOS

a: 真机

b: 模拟器

其实 ios 的环境安装非常之简单，只要安装 Xcode IDE 就可以了。ios 大法好啊。可以通过 App Store 或是到 Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE 和 Xcode 的命令行工具。需要注意的是，React Native 目前需要 Xcode 8.0 或更高版本。
安装好之后，打开 Preferences，点击 Locations，检查一下版本号是否正确。

Xcode 检查版本号

ok 了之后，就可以进行第四步。

2、Android

a: 真机

打开 USB 调试

确保你的设备已经打开了 USB 调试。

检查是否连接成功

在 bash 中执行下面的命令来检查手机是否已经和电脑连接：

1	adb devices

如果连接成功了，输入上面的那条命令之后，就会出现下面的信息：

真机连接

注意：在连接真机的时候需要把虚拟机关闭，确保只连接一个设备

如果连接成功了，可以进行第四步。

b: 模拟器

安装软件 Android Studio

Android Studio 需要 Java SE Development Kit (JDK) 的支持。你可以在命令行中输入javac -version 来查看你当前安装的 JDK 版本。如果版本不符合要求，可以到官网上下载。

java 下载

java 环境配置好之后，接下来就是要从官网下载 Android Studio。

注意： 在安装过程中，在 Install Type 这一步的时候最好选择 Custom。因为可以自定义一些设置和安装的组件。

需要更改的地方

选择好之后，点击 next，进入下一步，这时记得勾选下图中用红圈圈标出的两项。箭头指向的路径就是组件安装的路径。

sdk下载的地方.png

这两项选择好之后，一路 next 就可以啦。

安装好 Android Studio 之后，还要下载需要的sdk。如下图，点击 Configure 下的 SDK Manager，进入 sdk 配置页面。

SDK Manager

在窗口的右下角勾选 show-package-details。然后在 Android 6.0 (Marshmallow) 下勾选以下这些选项：

Google APIs
Android SDK Platform 23
Source for Android 23
Intel x86 Atom System Image
Google APIs Intel x86 Atom_64 System Image

选中之后，点击 Apply，就可以开始下载了。

android-6.0配置

下一步是进入 SDK Tools 窗口。同样，在窗口的右下角勾选 show-package-details。找到 Android SDK Build-Tools 并展开它，选择 23.0.1，点击 Apply，就可以开始下载了。

到目前为止，需要的 sdk 已经下载好了，下面咱们就开始安装虚拟机了。虚拟机目前有两种方式，一种是在 Android Studio 中安装它自带的虚拟机；一种是使用 genymotion 虚拟机。在这里推荐第二种，简单快捷方便，所以下面主要介绍一下 genymotion 的下载和安装～

genymotion

genymotion 的下载地址：https://www.genymotion.com/download/ 。这里需要登陆一下，才能进入到下载的页面。记得把自己的账号记住，下面还会用到。

genymotion 依赖 virtualbox，virtualbox 的下载地址在这里： https://www.virtualbox.org/wiki/Downloads

先安装 virtualbox，然后再安装 genymotion。下载下来的会有两个包，记得都要安装一下。

需要安装两个软件

打开 genymotion 的时候会让登陆一下，就是你刚刚记住的账号。然后就可以安装虚拟器了。如下图，点击 Add，可以选择一个手机类型和安卓系统的版本进行安装。

添加虚拟器

选择虚拟器

下载的过程还是挺慢的，需要耐心等待。下载好之后就能看到有一个手机模拟器出现在你本地的列表中啦。

成功添加虚拟器

三、ANDROID_HOME 变量配置

React Native 工具需要配置一些环境变量以便能够用本地代码构建 app。

首先在控制台中输入下面的命令，打开 .bash_profile 文件。如果没有的话，可以新建一个。新建文件的命令是 touch .bash_profile。

1	open ~/.bash_profile

在 .bash_profile 文件中添加一下变量：

1
2
3

export ANDROID_HOME=~/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

注意： 如果你是通过 Android Studio 安装的 sdk，那默认的位置就是 ~/Library/Android/sdk。否则的话就是安装的时候你自己定义的位置。编辑好之后，记得保存。

配置文件.png

保存之后，在控制台执行下面的命令，让配置生效。

1	source ~/.bash_profile

检查配置是否生效，可以在控制台执行下面的命令。

1	echo $ANDROID_HOME

配置android-home变量.png

四、执行任务

在第二步中我们已经安装好 react-native 和项目啦，现在让我们把项目运行起来～

ios

在 ios 端运行的话，在项目所在的目录下执行下面的命令就可以了：

1	react-native run-ios

android

在 android 端运行的话，先打开 Genymotion，然后再打开一个安卓的虚拟机，然后在你的项目目录下，执行下面的命令就可以了：

1	react-native run-android

五、可能遇到的问题

1、SDK location not found

1 2	A problem occurred configuring project ':app'. > SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

遇到的问题.png