Mac安装 React Native 开发环境

React Native 是当前最为流行的跨平台移动应用开发开发框架，无论是iOS、Android还是前端开发人员，都应该了解和掌握React Native 开发，本文主要记录Mac上安装 React Native 开发环境时遇到的一些问题。

简介

虽然RN(React Native常用简称，下同)的安装过程无论是在RN官网还是RN中文网都有详细的安装文档，但是由于墙的存在导致我在安装的过程中即使是架梯子也卡在了部分阶段，问题主要在Android的项目运行模拟器安装上，下面会详细介绍。至于其他部分，无论是Android Studio的安装和配置还是iOS的开发环境配置，请查看RN中文网，已经写得非常详细了，下面只会简单描述流程。

安装过程

Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件

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

使用Homebrew来安装Node.js,没有梯子的话建议设置npm镜像

brew install node

设置淘宝镜像

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

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

npm install -g react-native-cli

安装iOS/Android的IDE

• iOS的非常简单，App Store搜索Xcode下载就可以了。

• Android由于Google的原因就非常麻烦了，这里需要详细讲解下

1. 首先参考RN中文网的【安装Android Studio】和【配置ANDROID_HOME环境变量】章节进行安装和配置

2. Shell中输入

adb devices

检测可用的Android设备，截至目前由于还未安装Android模拟器所以输入该命令后并不能显示任何设备，此步骤是检测Android 环境变量是否配置成功。

3. Android Studio自带的原装模拟器安装方法：

首先打开刚才安装好的Android Studio，新建一个Android Project，在Target里选择API23，Android 6.0，这是因为RN需要Android 6.0的API版本，即API 23.0.1。创建好后运行该项目，不出意外的话会卡在打开项目上，因为打开Android项目时需要去墙外下载Gradle，但是我试了两款梯子都无法通过Android studio下载，所以需要自行下载：Gradle 4.1

，下载后打开Finder前往 ~/.gradle/wrapper/dists 目录，这时候一般可以看到一个gradle-4.1-all目录，这就是打开项目时所卡住的下载文件目录，进去后是 bzyivzo6n839fup2jbap0tjew 目录，再打开就可以看到下载的临时文件，将刚才下载的gradle-4.1-all.zip文件粘贴解压后重启Android studio就可以正常进入刚才创建的Android项目了。接下来就是安装原装模拟器，点击Android studio 工具栏的手机图标打开模拟器管理页面

image

选择设备后进入系统选择页面点击x86 Images选择Android 6.0(Google APIs)

image

之后就创建好了Android 6.0的模拟器，

image

点击绿色三角就可以启动这个模拟器了。打开模拟器后需要进入设置，拉到最下面的关于手机点进去连点Android Versions启用开发者模式，之后返回上一级找到Developer options点进去确认USB debugging被选中。现在在shell里输入adb devices命令就可以看到设备信息

，看到后就可以新建RN项目并用Android模拟器启动项目了，这里还需要设置Android 6.0所需要的Gradle版本2.14.1，先下载Gradle 2.14.1，之后前往 ~/.gradle/wrapper/dists 目录查看目录下是否包含gradle-2.14.1-all目录，如果没有就自己新建一个，并在该目录下新建8bnwg5hd3w55iofp58khbp6yv目录后将gradle-2.14.1-all.zip粘贴解压在8bnwg5hd3w55iofp58khbp6yv目录里，之后就可以启动RN项目了，之后启动项目都需要先打开Android studio然后在模拟器管理里面启动模拟器，这样有些麻烦，所以推荐安装 Genymotion模拟器

4. Genymotion模拟器安装

比起Android Studio自带的原装模拟器，Genymotion是一个性能更好的选择。

下载Genymotion和Virtualbox并安装，Genymotion安装后需要注册个人账号才可以免费试用。登录后点击ADD选择api23的模拟器进行下载，这一步有可能非常慢，可以自行下载。自行下载需要一点技巧，首先前往~/.Genymobile 目录，里面会有一个genymotion.log文件，打开这个文件在里面找到一个后缀类似于genymotion_vbox86p_6.0_170929_135720.ova的url，复制后用浏览器或者迅雷进行下载，之后复制到~/.Genymobile/Genymotion/ova目录下，之后再重新ADD虚拟机就会跳过下载步骤了，ADD成功之后就可以启动模拟器运行RN项目了。

以上就是Android的模拟器安装步骤，到这里Android的RN开发环境就配置结束，下面讲一下iOS运行RN项目。

5. iOS运行RN项目

iOS的环境配置非常简单，只需要安装XCode后前往/Applications/Xcode.app/Contents/Developer/Applications目录，打开Simulator.app 就可以run-ios了。

结束语

以上就是配置Mac下RN开发环境的一些注意事项，如有问题欢迎咨询我。