前言

上篇介绍了最新版本的RN 63版本的ios环境踩坑经历，这篇将介绍一下React-native 0.63 在windows 10下的android环境搭建踩坑经历。

搭建Node和JDK

Node 安装

NodeJs在windows10 上安装还是非常容易的。去NodeJs官网下载当前稳定版本的Installer安装程序一步一步的安装即可。

注意 Node 的版本应大于等于 12，安装完 Node 后建议设置 npm 镜像（淘宝源），具体的步骤可以参考这篇文章，不要使用 cnpm！ cnpm安装的模块路径比较奇怪，packager 不能正常识别！

JDK安装

按照React-Native官网的提示， JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本，注意 1.8 版本官方也直接称 8 版本）。JDK1.8下载地址

JDK1.8的安装相对也是非常简单也是按照可执行程序下一步下一步的安装即可。

安装完JDK，还需要进行配置JDK，在windows10上配置JDK可以详细看这篇文章

Android 开发环境

安装 Android Studio

先下载Android Studio，在官方网站上选好相应的版本后进行安装。安装完以后就需要安装相应的SDK等操作，安装SDK时需要翻墙软件或者能连接外国网站的VPN，否则会很郁闷。

安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 10 (Q)版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android4.1 以上设备）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。

在 SDK Manager 中选择**"SDK Platforms"**选项卡，然后在右下角勾选"Show Package Details"。展开Android 10 (Q)选项，确保勾选了下面这些组件：
- Android SDK Platform 29
- Intel x86 Atom_64 System Image
然后点击 "SDK Tools" 选项卡，同样勾中右下角的"Show Package Details"。展开 "Android SDK Build-Tools" 选项，确保选中了 React Native 所必须的29.0.2版本 。你可以同时安装多个其他版本。

最后点击 "Apply" 来下载和安装这些组件。

配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录，你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android SDK。

把一些工具目录添加到环境变量 Path 中

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把这些工具目录路径添加进去：platform-tools、emulator、tools、tools/bin

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

如果顺利的将上述的步骤都完成那说明很顺利，也恭喜你完成了node，JDK，android studio以及andord SDK的安装。下面使用一个简单的例子来运行一下。

创建React Native工程

由于使用的最新版本的React Native 0.63且nodejs和npm版本也近乎于最新版本，所以执行下面的命令就可以创建一个工程。

npx react-native init AwesomeProject

这个过程也许需要久一点。这个和当前网络有很大关系

提示：你可以使用--version参数（注意是两个杠）创建指定版本的项目。例如npx react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

准备运行与调试

运行react-native的安卓工程和运行ios工程类似，只是ios的xcode提供了一个很好的模拟器，性能和效果都很好。android在这点上就有点寒酸，android studio自带的模拟器，虽然免费但是性能非常不好，非常的消耗资源。除非电脑的性能很优越，不然不推荐使用android studio自带的模拟器。

那么运行android工程该使用什么设备呢？答案是真机或者第三方模拟器。

真机运行

react-native官方提供了一个很好的一篇教程，地址如下，参考这个就可以一步步的完成如何在android真机上运行工程。

android studio 模拟器运行

可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备。如果你刚刚才安装 Android Studio，那么可能需要先创建一个虚拟设备。点击"Create Virtual Device..."，然后选择所需的设备类型并点击"Next"，然后选择Q API Level 29 image.

译注：请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

如果你还没有安装 HAXM（Intel 虚拟硬件加速驱动），则先点击"Install HAXM"或是按这篇文档说明来进行安装。

然后点击"Next"和"Finish"来完成虚拟设备的创建。现在你应该可以点击虚拟设备旁的绿色三角按钮来启动它了，启动完后我们可以尝试运行应用。

运行项目

这个地方需要提到一个关键的坑，但是这个坑绝对是针对有网络代理或者有vpn的公司网络环境下才会出现的。常规的运行代码如下：

yarn android

以上是运行安卓的命令。

首次运行上述代码，android会自行下载gradle以及gradle的相关以来，且gradle是基于maven进行构建的。那么坑就来了，由于公司的网络使用了vpn，所以工程在build时出现了如下错误：

PKIX path building failed

就是build下载以来maven依赖包时的地址无法通过java的ssl认证。于是上网找了很多关于如何解决这个问题的方法和帖子。

添加信任证书的方法：访问网站之后从网站上下载证书，通过keytool进行导入。
配置android studio 跳过ssl认证方法。

上述方法都不好使。正在我准备放弃时，我关掉了公司vpn又重新试了一次，yarn android时，居然好使了，那么总结一下就是说，网络环境会造成gradle的构建。

如果想让gradle 构建的更快一些，可以修改工程的build.gradle文件，将文件中所有的

google()
jCenter()
//都分别替换成
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }

上述踩完坑以后就顺利的在模拟器中看到的react-native的页面。

React-Native 0.63踩坑之旅--android环境搭建

目录

前言