从零开始在 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 旅程，正式开始了。
