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


要配置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

React-Native:Windows配置Android环境

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

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

React-Native:Windows配置Android环境

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

React-Native:Windows配置Android环境

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

 
安装Node

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

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

 

安装Python2

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

React-Native:Windows配置Android环境

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

点击进入后,选择Windows 64位安装包:

React-Native:Windows配置Android环境

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

安装Android Studio

打开下载页:https://developer.android.google.cn/studio/

React-Native:Windows配置Android环境

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

React-Native:Windows配置Android环境

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

React-Native:Windows配置Android环境

另外,还需要配置ANDROID_HOME,若没有该变量名则创建一个

React-Native:Windows配置Android环境

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

React-Native:Windows配置Android环境

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

React-Native:Windows配置Android环境

在 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' 。或者点击界面中的 React-Native:Windows配置Android环境 图标,打开虚拟机管理器

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

React-Native:Windows配置Android环境

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

React-Native:Windows配置Android环境

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

React-Native:Windows配置Android环境

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

创建新项目

使用 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 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行。


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


参考文章:

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

ReactNative中文网-搭建环境

相关文章: