在 Windows 上搭建 ReactNative Android 开发环境

醉尽长梦
2,757 阅读9分钟

在 Windows 上搭建 React Native Android 开发环境的必须安装的依赖：Node、Python2、JDK 和 Android Studio的安装。

环境搭建

一.安装 Node

下载地址: nodejs.org/en/

注意：

  • 需要安装最新的长期稳定版本，不要实验版本；
  • Node 的版本应大于等于 12，安装完毕之后的node.js会自动配置到全局系统环境变量中；
  • 安装完毕后，可以输入 node -v 查看node版本号；
  • 不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！
# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm

Yarn

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替 npm install 命令，用 yarn add 某第三方库名代替 npm install 某第三方库名。


这里我使用的是12.16.2版本的：


二.安装 Python2

下载地址: www.python.org/downloads/

注意：

  • 安装Python时候，只能安装2.×的版本，注意勾选安装界面上的Add Python to path中的第二个，这样才能自动将Python安装到系统环境变量中；

  • 安装完毕之后，可以在命令行中运行python，检查是否成功安装了python。

详细安装步骤请参考：www.cnblogs.com/coco56/p/11…

这里我使用的是2.7.17版本的：


三.安装 JDK

建议直接使用搜索引擎搜索下载 或者使用我分享的百度云盘链接

百度云盘链接：pan.baidu.com/s/1goFaxmdd… 提取码：x9xh

注意：

  • JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）
  • JDk要自己配置环境变量了

JDK安装过程(傻瓜式安装就行)

傻瓜式安装都不会的参考这个：blog.csdn.net/weixin_4408…


JDK 配置环境变量（win10为例）

1.打开“此电脑”，右键选择属性，选择高级系统设置。

2.点击“环境变量”。

3.在系统变量区域，点击新建。

4.变量名：JAVA_HOME ，变量值为 jdk 的安装路径。

5.新建变量名：CLASSPATH ，变量值： .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

（注意：变量值开头是英文句号）

6.找到Path变量，双击编辑 Path变量。

点击新建，变量值为%JAVA_HOME%\bin ，并将它移到最前端，然后点击确定。

这就配置完成了。 参考地址：www.runoob.com/java/java-e… (注意保存所有的系统环境变量，同时退出系统环境变量配置窗口)


最后检查一下

win + R 运行 cmd 命令行工具，输入 java -version


四.安装 Android 开发环境

如果你之前没有接触过 Android 的开发环境，那么请做好心理准备，这一过程相当繁琐。请万分仔细地阅读下面的说明，严格对照文档进行配置操作。

1. 安装 Android Studio

下载地址：developer.android.google.cn/studio#down… (根据自己电脑选择)

安装步骤：(傻瓜式安装 一直next就行) 亲测尽量不要装C盘，要不然电脑卡死


打开Android studio后，进入相关配置界面，第一次安装时，没有以往配置的数据，所以选择第二个选项。如果以往安装过AS，有过他的配置，那么可以选择第一个，导入配置。

如下，直接点击OK

点击cancel

点击cancel，如果进入到了AS的安装向导界面 没有下面就不用管

没有就不用管 安装界面中选择"Custom"选项，确保选中了以下几项：

  • Android SDK

  • Android SDK Platform

  • Performance (Intel ® HAXM) (AMD 处理器看这里)

  • Android Virtual Device

然后点击"Next"来安装选中的组件。

安装完成后，看到欢迎界面时，就可以进行下面的操作了。

2. 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 9 (Pie)版本的 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 9(Pie)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

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

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

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

1

2
3

3. 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为 ANDROID_HOME 的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（具体的路径可能和下图不一致，请自行确认）：

SDK 默认是安装在下面的目录：

c:\Users\你的用户名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android SDK。

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

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

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

这里我文字说明一下(因为我的出现不了目录，具体不知道咋肥事)：选中下面那个系统环境Path变量，双击或编辑，会出现一个目录，然后把新建添加上面四个工具目录。最后确定一下就可以了，一定不要右上角的×.
出现不了目录的，编辑Path变量，在最后面添加，每写一个在后面加一个 分号 ; 。


5.准备 Android 设备

使用 Android 真机

你也可以使用 Android 真机来代替模拟器进行开发，只需用 usb 数据线连接到电脑，然后遵照在设备上运行这篇文档的说明操作即可。

使用 Android 模拟器

你可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备。

如果你刚刚才安装 Android Studio，那么可能需要先创建一个虚拟设备。点击"Create Virtual Device..."，然后选择所需的设备类型并点击"Next"，然后选择Pie API Level 28 image.

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

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

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

2

3

4

5

6

## 恭喜，到此就完成了所有的配置了。之后就可以创建项目了。


创建项目

有坑注意

  • 如果你之前全局安装过旧的 react-native-cli 命令行工具，请使用 npm uninstall -g react-native-cli 卸载掉它以避免一些冲突。不用安装 react-native-cli ，直接用 node 自带的 npx 命令来使用（注意 init 命令默认会创建最新的版本）。

  • 注意：请 不要 单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。 请 不要 使用与核心模块同名的项目名（如 react, react-native 等）。 请 不要 在目录、文件名中使用中文、空格等特殊符号。

  • Windows 用户请注意，请不要在某些权限敏感的目录例如 System32 目录中 init (创建) 项目！会有各种权限限制导致不能运行！

  • 注意创建react-native项目的路径中千万不能有中文：如：E:\学习\gitee\study 等等,亲测整条路径不能有中文。 报错信息如下：

G:\BaiduNetdiskDownload\RN搭建\AwesomeProject>yarn android
yarn run v1.9.4
$ react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 967 file(s) to forward-jetify. Using 4 workers...
info Starting JS server...
info Launching emulator...
info Successfully launched emulator.
info Installing the app...
:ReactNative:Unexpected empty result of running '[node, G:\BaiduNetdiskDownload\RN搭建\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js, config]' command.
:ReactNative:Running '[node, G:\BaiduNetdiskDownload\RN搭建\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js, config]' command failed.

FAILURE: Build failed with an exception.

* Where:
Script 'G:\BaiduNetdiskDownload\RN�\AwesomeProject\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 195

* What went wrong:
A problem occurred evaluating script.
> internal/modules/cjs/loader.js:983  throw err;  ^Error: Cannot find module 'G:\BaiduNetdiskDownload\RN鎼缓\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js'    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)    at Function.Module._load (internal/modules/cjs/loader.js:862:27)  
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)    at internal/main/run_main_module.js:18:47 {  code: 'MODULE_NOT_FOUND',  requireStack: []}

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 9s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
:ReactNative:Unexpected empty result of running '[node, G:\BaiduNetdiskDownload\RN搭建\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js, config]' command.
:ReactNative:Running '[node, G:\BaiduNetdiskDownload\RN搭建\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js, config]' command failed.

FAILURE: Build failed with an exception.

* Where:
Script 'G:\BaiduNetdiskDownload\RN�\AwesomeProject\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 195

* What went wrong:
A problem occurred evaluating script.
> internal/modules/cjs/loader.js:983  throw err;  ^Error: Cannot find module 'G:\BaiduNetdiskDownload\RN鎼缓\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js'    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)    at Function.Module._load (internal/modules/cjs/loader.js:862:27)  
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)    at internal/main/run_main_module.js:18:47 {  code: 'MODULE_NOT_FOUND',  requireStack: []}

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 9s

    at makeError (G:\BaiduNetdiskDownload\RN搭建\AwesomeProject\node_modules\execa\index.js:174:9)
    at G:\BaiduNetdiskDownload\RN搭建\AwesomeProject\node_modules\execa\index.js:278:16
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async runOnAllDevices (G:\BaiduNetdiskDownload\RN搭建\AwesomeProject\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:5)
    at async Command.handleAction (G:\BaiduNetdiskDownload\RN搭建\AwesomeProject\node_modules\@react-native-community\cli\build\index.js:186:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  • 如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的翻墙工具，否则将频繁遭遇链接超时和断开，导致无法运行。

解决方法： 使用阿里云提供的maven镜像，将 android/build.gradle 中的 jcenter() 和 google() 分别替换为 maven { url 'https://maven.aliyun.com/repository/jcenter' } 和 maven { url 'https://maven.aliyun.com/repository/google' } （注意有多处需要替换）。


正常情况下： 运行 yarn android 或 npm run android 启动项目会自动弹出三个框

avatar
文章
阅读
粉丝
相关推荐
react-native 启动页空白
1.0k阅读
 · 
2点赞
React Native for Android 中文教程
8.5k阅读
 · 
206点赞
开发 React Native APP —— 从改造官方Demo开始（二）
4.9k阅读
 · 
51点赞
2020最新版React Native从入门到实战打造高质量上线App
577阅读
 · 
1点赞
🍋 React-Native 官方示例演示 ( ios & android)
5.5k阅读
 · 
47点赞
React Native开发环境搭建
2.7k阅读
 · 
60点赞
Android 真机搭建 React-Native 环境踩坑记录
7.6k阅读
 · 
13点赞
原生项目集成react-native--android篇
1.7k阅读
 · 
1点赞
React-Native从零搭建App（长文）
24k阅读
 · 
444点赞

友情链接：