React Native搭建环境图解说明（Windows）-平芜编程栈

从零开始在 Windows 上搭建 React Native 开发环境：手把手带你避坑

你是不是也经历过这样的场景？兴致勃勃想用 React Native 写个 App，结果刚打开文档就看到“安装 Node.js、JDK、Android Studio、配置环境变量……”一连串术语扑面而来。点开教程，不是命令行报错就是模拟器起不来，折腾半天代码还没写一行。

别慌——这不是你的问题，而是React Native 环境搭建的真实痛点。

尤其在 Windows 平台，路径空格、权限限制、版本冲突、环境变量混乱等问题层出不穷。但好消息是：只要每一步都走对了，这个过程完全可以丝滑顺畅。

今天我就以一个实战开发者的视角，带你完整、清晰、无坑地完成 React Native 开发环境部署，全程图文结合，关键步骤一一拆解。目标很明确：
👉 安装完成后能直接运行npx react-native run-android，手机或模拟器上弹出 “Welcome to React Native” 页面。

为什么选 React Native？它真的值得吗？

先简单说两句背景。

React Native 是 Facebook 推出的跨平台移动开发框架，最大的魅力在于：

用 JavaScript 和 React 写代码，生成接近原生性能的 Android 和 iOS 应用。

这意味着前端开发者无需学习 Java/Kotlin 或 Swift/Objective-C，也能快速构建高性能 App。国内像京东、美团、携程等大厂都在部分业务中使用 RN 技术栈。

而 Windows 又是国内开发者最主流的操作系统之一。虽然社区常有人说“Mac 更适合做移动端开发”，但事实是：Windows + Android 模拟器完全能满足绝大多数 RN 开发需求，尤其是初期学习和中小型项目。

所以，我们没必要被“必须用 Mac”的说法吓退。只要环境配得对，Windows 同样高效！

第一步：安装 Node.js —— 让 JS 能跑起来

React Native 的一切操作都依赖于Node.js。它是整个工具链的地基，没有它，连项目都建不了。

✅ 正确做法：

打开官网： https://nodejs.org
下载LTS（长期支持）版本（目前推荐 v18.x 或 v20.x）
双击.msi文件安装，全部按默认选项走即可

⚠️ 特别注意：不要把 Node.js 安装到带中文或空格的路径下！比如C:\Program Files (x86)\Node.js是 OK 的，但D:\学习资料\node就可能出问题。

验证是否成功：

打开命令提示符（CMD 或 PowerShell），输入：

node -v npm -v

如果输出类似v18.17.0和9.6.7这样的版本号，说明安装成功 ✔️

📌 小贴士：npm是 Node 自带的包管理器，后面我们要靠它下载 React Native 工具。

第二步：配置 JDK 11 —— 构建 Android 的基石

接下来要装的是JDK（Java Development Kit）。别小看这一步，很多人卡在“Gradle failed”就是因为 JDK 版本不对。

❗重点来了：一定要用 JDK 11！

React Native 官方推荐JDK 11
JDK 17+ 在某些旧版 RN 中会有兼容性问题
不要用 Oracle JDK，容易触发许可证弹窗；推荐开源免费的发行版

✅ 推荐安装方式：

访问 https://adoptium.net
选择：
- Platform: Windows
- Version: 11 (LTS)
- Package Type: Installer (.msi)
- Architecture: x64
下载并安装，默认路径即可

配置环境变量（关键！）

这是最容易出错的地方。我们必须告诉系统：“JDK 装在哪”。

操作步骤：

按Win + S搜索 “环境变量” → 点击【编辑系统环境变量】
点击【环境变量】按钮
在“系统变量”区域点击【新建】
- 变量名：JAVA_HOME
- 变量值：JDK 安装路径（例如：C:\Program Files\Eclipse Adoptium\jdk-11.0.15.10-hotspot）
找到Path变量 → 编辑 → 新增一项：
%JAVA_HOME%\bin

验证命令：

java -version javac -version

你应该看到输出包含11.0.xx的信息。如果有错误，请回头检查路径是否正确、有无空格、是否重启了终端。

第三步：安装 Android Studio 和 SDK 工具链

这一步工作量最大，但也最重要。我们需要三样东西：

Android SDK：编译 APK 所需的核心库
ADB（Android Debug Bridge）：连接设备的关键工具
Emulator：不用真机也能测试 App

✅ 安装流程详解：

前往官网下载 Android Studio：
👉 https://developer.android.com/studio
运行安装程序，勾选所有默认组件（包括 Android Virtual Device）
首次启动后，进入欢迎界面 → Configure → SDK Manager

在【SDK Platforms】标签页：

勾选左下角 “Show Package Details”
至少安装一个系统镜像，建议选：
Android 12.0 (S) API 31或Android 13 (Tiramisu) API 33
同时勾选对应的Intel x86 Atom_64 System Image

💡 为什么要 x86_64？因为它支持硬件加速，在大多数电脑上运行更快。

在【SDK Tools】标签页：

同样勾选 “Show Package Details”，然后确保安装以下内容：
- ☑ Android SDK Build-Tools（最新稳定版，如 34.0.0）
- ☑ Android Emulator
- ☑ Android SDK Platform-Tools（含 adb）
- ☑ Intel x86 Emulator Accelerator (HAXM installer) —— 如果你是 Intel CPU
- ☑ Android SDK Tools（legacy）—— 有些 CLI 命令仍需要它

⚠️ AMD 用户注意：你需要启用 Windows Hypervisor Platform (WHPX)，否则模拟器无法启动。

配置 ANDROID_HOME 环境变量

这一步决定你的命令能不能找到 SDK。

设置方法：

新建系统变量：
- 变量名：ANDROID_HOME
- 变量值：SDK 所在目录
默认路径通常是：
C:\Users\<你的用户名>\AppData\Local\Android\Sdk
修改Path变量，添加以下四项：
%ANDROID_HOME%\platform-tools %ANDROID_HOME%\emulator %ANDROID_HOME%\tools %ANDROID_HOME%\tools\bin

🔍 补充说明：tools/bin里有sdkmanager和avdmanager，虽然新版 Gradle 很少用到，但很多脚本仍然依赖它们。

第四步：创建第一个 React Native 项目

终于到了激动人心的时刻！

我们不再全局安装react-native-cli（那是老方式），而是使用现代推荐的npx方式来初始化项目。

创建项目：

打开终端（建议使用 VS Code 内置终端或 Windows Terminal），执行：

npx react-native init AwesomeProject

第一次运行会比较慢，因为它要下载模板、安装依赖。耐心等待几分钟。

进入项目目录：

cd AwesomeProject

第五步：启动开发服务器与安卓应用

现在分两个终端操作。

终端 1：启动 Metro 打包服务

npx react-native start

你会看到一个白底黑字的界面，显示正在监听 8081 端口。

终端 2：运行到安卓设备

npx react-native run-android

这时会发生几件事：
1. Gradle 开始构建 Android 工程（首次非常慢，可能 5~10 分钟）
2. 自动拉起 Android 模拟器（如果你之前创建过 AVD）
3. 编译好的 APK 安装进模拟器并自动启动

✅ 成功标志：模拟器屏幕上出现蓝色背景的 App，写着“Welcome to React Native!”

🎉 恭喜你！你现在拥有了完整的 React Native 开发环境！

提升体验：这些优化建议请收好

1. 加快 Gradle 构建速度

打开项目中的android/gradle.properties文件，加入以下配置：

org.gradle.parallel=true org.gradle.configureondemand=true org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8 android.useAndroidX=true android.enableJetifier=true

这能让多模块编译并行处理，显著减少等待时间。

2. 如何创建模拟器设备（AVD）

如果你发现run-android没有自动启动模拟器，可能是还没有创建虚拟设备。

方法如下：
1. 打开 Android Studio
2. Configure → AVD Manager
3. 点击 “Create Virtual Device”
4. 选择设备型号（如 Pixel 4）
5. 选择系统镜像（建议 API 31, x86_64）
6. 完成创建

下次运行就会自动启动这个模拟器。

3. 真机调试更流畅？

当然可以！只需：
- 手机电线连接电脑
- 开启开发者模式 + USB 调试
- 执行npx react-native run-android即可安装到真机

优点是交互更真实，缺点是热更新有时不如模拟器稳定。

常见问题 & 解决方案（亲测有效）

问题	原因	解法
`command not found: react-native`	没用`npx`	改用`npx react-native`
`SDK location not found`	`ANDROID_HOME`未设置	检查环境变量拼写和路径
模拟器黑屏/卡死	显卡驱动不支持	更新显卡驱动，启用 WHPX/Hyper-V
Metro 连接失败	IP 地址不对	在模拟器中按`Ctrl + M`→ Dev Settings → Debug Server Host → 输入`10.0.2.2:8081`
构建时报错`Unsupported class file major version 61`	使用了 JDK 17+	切回 JDK 11

最后一点思考：这套环境到底值不值得花时间？

我经常被问：“现在都 2025 年了，还要学 React Native 吗？”

我的答案是：要看场景。

如果你要快速验证产品原型、维护已有项目、或者团队已有前端人力，那 RN 依然是极具性价比的选择。
而且这一套环境不仅服务于 React Native，还能轻松扩展到 Flutter、Ionic、Capacitor 等其他混合框架。

换句话说：你配的不只是 RN 环境，而是一整套跨平台移动开发基础设施。

而且一旦搭好，后续所有新项目都能复用，效率提升立竿见影。

写在最后

技术的本质不是炫技，而是解决问题。

搭建环境看似琐碎，但它决定了你能否顺利迈出第一步。希望这篇指南能帮你省下几个通宵查错的时间，把精力真正用在写代码、做功能、创造价值上。

如果你在过程中遇到任何问题，欢迎留言交流。我已经踩过的坑，不想让你再踩一遍。

现在，关掉这篇文章，打开终端，敲下那一行命令吧：

npx react-native init MyFirstApp

属于你的 React Native 旅程，正式开始了。

React Native搭建环境图解说明（Windows）