【潮汐】React-Native，Mac下Android平台搭建和环境变量配置

最近一段时间在自学react-native，由于只有Mac电脑没有IPhone手机，实验出了一点东西没有办法在真机上测试。所以根据 React Native 文档搭建安卓环境搭建和配置环境变量。

然而失败了，准确的说是官方文档的 安卓环境搭建 和 配置环境变量 我没有看懂。这很是尴尬，经过我不懈的努力（就是百度很多方案），终于搭配成功，在这和大家分享一下我结合了很多的方案后总结的可以说是100%有效的 Mac 下搭建 React Native 的安卓环境搭建和配置环境变量

闲话不多说，我们进入正题

---

安装Android Studio

友情提示

搭建的时候请严格按照官方文档的要求进行搭建，因为我搭建的时候以文档为主，其他方法为辅。

前面的安装我就不多在叙述了，按照文档开始就可以，不懂得看文档，我们从 Android Studio 开始

所需版本

1. React Native目前需要 Android Studio2.0 或更高版本。
2. Java Development Kit [JDK] 1.8或更高版本。

注意

• 你可以在命令行中输入 javac -version 来查看你当前安装的JDK版本。如果版本不合要求，则可以到官网上下载。
• 除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository ，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。

安装过程中有一些需要改动的选项：

• 选择 Custom 选项：

3162826-e15609a32801bc2c.png

• 勾选 Performance 和 Android Virtual Device

3162826-34ae8e10509f4a33.png

注意：sdk的安装地址最好不要乱动，Mac是没有磁盘分区的所以各个文件是不会又相互干扰的可能，所以最好不要胡乱更改地址不然配置环境变量时会稍微有些麻烦

• 安装完成后，在Android Studio的启动欢迎界面中选择 Configure | SDK Manager

3162826-8b7ab47c0c97b67f.png

在SDK Platforms 窗口 和 SDK Tools 窗口

注意：

这里和官方文档是不一样的（虽然图是一样的）

• 这里以 Android 6.0 为例选择sdk下载，图中选了哪个，我们跟着选哪个，与图保持一致（当然如果你是开发Android 5.0，则在Android 5.0的下面选择与图对应选项进行打钩）

3162826-a09820999933c57c.png

3162826-ade9a3dd63ce08b6.png

等所有的下载都完成后，我们的Android的IDE工具的搭建就完成了

---

配置Android环境变量

配置流程

1. 在终端中输入命令，进入用户目录
   $ cd ~

2. 输入命令，该命令的作用是如果不存在.bash_profile文件，则创建该文件
   $ touch .bash_profile

3. 输入命令，该命令的作用是用文本编辑器TextEdit打开.bash_profile文件。如果你是第一次配置环境变量，则该文档应该是空的。
   $ open -e .bash_profile

4. 复制下面的文字到 .bash_profile 文件中，主要修改sdk目录
   export ANDROID_HOME=~/Library/Android/sdk
   export PATH=ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

5. 修改并保存，关闭 .bash_profile 文件

3162826-b487092ed7da9b01.jpg

6. 使用下列命令使其立即生效（否则重启后才生效）：
   $ source ~/.bash_profile

7. 测试

   • 测试$ echo $ANDROID_HOME 检查此变量是否已正确设置。
   • 测试adb命令：$ adb version 显示版本
   • 测试android命令：$ android 弹出Android Sdk Manager

8. 运行自己的react-native程序，Android程序
   $ react-native run-android

3162826-01725bfc197b7fd2.jpg

当这些“·················”安装完后会发生报错，翻译过来的意思是运行安卓程序前需要先开启安卓虚拟机。也就是说我们需要 ** 先开启虚拟机**，再运行react-native的Android程序。
开启虚拟机的命令 $ android avd
至于虚拟机如何设定，我就不再多说了。
到此为止，我们就可以开始在电脑开启安卓虚拟机来进行react-native程序的安卓版的测试了。

---

结语

亲测在我的mac上，网速良好的情况下，历时两个半小时安装完成并且可以正式运行。

---

借鉴网站和博客：

• react-native中文网
• React—native+Android环境搭建和开发配置（Mac）