React-Native：Windows配置Android环境

左手的ㄟ右手 2022-03-24 16:18 397阅读 0赞

弄了一下午，遇到了挺多问题的，完整记录一下：

--------------------

要配置RN的Android开发环境需要4个依赖：

*  **JDK（版本必须是 1.8）**
 *  **Node（版本必须高于8.3）**
 *  **Python2（只能是2.x，不支持3.x）**
 *  **Android Studio**

# **安装JDK** #

打开JDK下载页：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70][]

点击'Accept License Agreement '，然后在下面的列表中选择下载32位或64位，这里我下载64位。

下载后得到一个 'jdk-8u191-windows-x64.exe' 文件，双击安装全部 '下一步' 即可。接着，配置JDK的环境变量。打开环境变量，创建变量JAVA\_HOME，值为JDK的安装目录，如 C:\\Program Files\\Java\\jdk1.8.0\_191

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 1][]

打开环境变量Path（没有则创建一个），配置JDK的可执行文件bin目录，如C:\\Program Files\\Java\\jdk1.8.0\_191\\bin

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 2][]

配置好了后，打开DOS环境，输入 'java -version'，可以打印出版本号则表示JDK已经安装成功。

#     **安装Node** #

打开Node下载页：https://nodejs.org/zh-cn/download/

择长期支持的稳定版本，点击 'Windows 安装包' 下载，下载完成后双击安装，安装时全部点 '下一步' 即可。安装完成后打开DOS环境，输入 'node -v'，如果可以打印出版本号表示Node也安装成功了。

# **安装Python2** #

打开下载页：https://www.python.org/downloads/windows/

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 3][]

选择Python2.x，记住，目前RN不支持3.x。

点击进入后，选择Windows 64位安装包：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 4][]

下载完成后，双击安装，全部 '下一步' 即可。

# **安装Android Studio** #

打开下载页：[https://developer.android.google.cn/studio/][https_developer.android.google.cn_studio]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 5][]

下载后直接安装即可，安装过程可以参考：[Android studio安装与配置][Android studio]。安装完成后会在桌面生成图标，双击打开 'Android Studio'。首次打开时可能会报 '没有SDK' 的错误

![20190122150315611.png][]

那是因为Android SDK现在已经不和Android Studio集成在一起安装，这里点击Cancel即可。之后会进入Android SDK的安装向导，此处有个坑，安装SDK时尽量不要安装在C盘，因为启动虚拟机时会占用很大的内存消耗。我们按照向导安装SDK即可。我这里把SDK安装在D盘目录D:\\ReactNative\\android-sdk。安装完成后，我们需要配置Android SDK的环境变量，有三项，打开Path，配置如下：

![20190122150348734.png][]

另外，还需要配置ANDROID\_HOME，若没有该变量名则创建一个

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 6][]

配置后，重启Android Studio，已经可以正常打开

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 7][]

我们点击'Configure'，在打开的下拉列框中选择 'SDK Manager'，打开SDK管理页

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 8][]

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开`Android 8.1 (Oreo)`选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

*  `Android SDK Platform 27`
 *  `Intel x86 Atom_64 System Image`（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的`27.0.3`版本。你可以同时安装多个其他版本。

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

## 创建Android模拟器 ##

接着我们创建一个虚拟机，点击'Tools'选项，在下拉列中选中 'AVD-Manager' 。或者点击界面中的 ![20190104144439191.jpg][] 图标，打开虚拟机管理器

点击 'Create Virtual Device' 打开创建页

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 9][]

选择好设备后，点击 'Next'，选择要安装的系统版本，这里我选择API Level 为 27，如果没有该API需要先安装，点击Download即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 10][]

剩下的全部点击 'Next' 即可。这样，我们的虚拟机就创建出来了，点击启动按钮即可启动虚拟机（有些电脑会在这步发生错误，报错：没有使用虚拟机的权限。这种情况只要去BIOS里打开虚拟机使用权限即可，一般是在 '**Virtualization **' 选项里设置开关）。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 11][]

然后将模拟器启动起来！！

## 创建新项目 ##

使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目：

react-native init AwesomeProject

> **注意，千万不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！**

## 编译并运行 React Native 应用 ##

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行`react-native run-android`：

cd AwesomeProject
    react-native run-android

如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。

> 注：建议在`run-android`成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

--------------------

若遇到了其他如下的问题请查看下面的文章：

*  [AndroidStudio报错：PANIC: Missing emulator engine program for 'arm' CPU.][AndroidStudio_PANIC_ Missing emulator engine program for _arm_ CPU.].
 *  [利用Android Studio自带的模拟器联网][Android Studio]
 *  [React Native开发--Downloading https://services.gradle.org/distributions/gradle-4.4-all.zip 失败][React Native_--Downloading https_services.gradle.org_distributions_gradle-4.4-all.zip]
 *  [React Native开发-- Error:Execution failed for task ':app:mergeDebugResources'.][React Native_-- Error_Execution failed for task _app_mergeDebugResources_.]

--------------------

参考文章：

[react-native系列(2)入门篇：Windows系统下配置Android开发环境][react-native_2_Windows_Android]

[ReactNative中文网-搭建环境][ReactNative_-]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70]: /images/20220323/69b6fc652aba4c2690500bc61a56ebad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 1]: /images/20220323/1b9df28c424b4229bf84b62666768f58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 2]: /images/20220323/993c1313180047f0b73e8519806da09f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 3]: /images/20220323/77e754369f834bf2b747d1832f194647.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 4]: /images/20220323/c9cdc79a58374287a67f2b9ae8b60041.png
[https_developer.android.google.cn_studio]: https://developer.android.google.cn/studio/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 5]: /images/20220323/0650162979aa4ecda950d1c96740bd09.png
[Android studio]: https://www.cnblogs.com/xiadewang/p/7820377.html
[20190122150315611.png]: /images/20220323/438e0d01d5d34579aeacb0005ab9c0ea.png
[20190122150348734.png]: /images/20220323/fe26d8acc86b435699d3556850947622.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 6]: /images/20220323/2347d404d6e1437e830eb27b7207034f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 7]: /images/20220323/ebf5b509a15248b6bed9332594a69839.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 8]: /images/20220323/fb4227cfc3304e5188557403e492cb08.png
[20190104144439191.jpg]: /images/20220323/def08808517d40fcb5cb51ea39b732d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 9]: /images/20220323/648386340bb64b2fa8edbb43affb1dfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 10]: /images/20220323/bddaca38d87c495c9315c3f6b8c29d2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 11]: /images/20220323/3e704c4b702942918c5f455a8d36c4d7.png
[AndroidStudio_PANIC_ Missing emulator engine program for _arm_ CPU.]: https://blog.csdn.net/qq_36157085/article/details/86595328
[Android Studio]: https://blog.csdn.net/qq_36157085/article/details/86595442
[React Native_--Downloading https_services.gradle.org_distributions_gradle-4.4-all.zip]: https://blog.csdn.net/qq_36157085/article/details/86595680
[React Native_-- Error_Execution failed for task _app_mergeDebugResources_.]: https://blog.csdn.net/qq_36157085/article/details/86596064
[react-native_2_Windows_Android]: https://blog.csdn.net/zeping891103/article/details/85769957#commentsedit
[ReactNative_-]: https://reactnative.cn/docs/getting-started.html