从零开始在 Windows 上配通 React Native：手把手带你跨过环境搭建这道坎
你是不是也经历过这样的时刻？
兴致勃勃想用 React Native 写个 App，结果刚打开文档，看到“安装 Node.js、配置 JDK、装 Android Studio、设一堆环境变量”……头都大了。
执行npx react-native init却报错：“找不到 adb”、“SDK location not found”、“Could not run adb”……
一顿操作猛如虎，重启十次电脑还是跑不起来模拟器。
别慌。
我当年也是这么过来的——查了三天论坛、翻了十几篇教程、删了五遍 SDK 才终于跑出第一个 “Hello World”。
今天这篇文章，就是要把那些藏在官方文档角落里的坑、Windows 系统特有的雷区、以及新手最容易忽略的关键细节，一条条给你掰开揉碎讲清楚。
我们不堆术语，不说“建议开发者自行配置”，而是像朋友聊天一样，一步步告诉你：每个工具到底起什么作用？为什么非它不可？怎么装才不会出问题？
准备好了吗？咱们现在就开始。
先搞明白一件事：React Native 在 Windows 上到底是怎么跑起来的？
很多人一开始就被卡住，是因为没搞清整个流程背后的逻辑。
你以为写的是 JavaScript，点一下就能运行？错。
React Native 的本质是：你写的 JS 代码，最终要被翻译成原生 Android（Java/Kotlin）代码来执行。
所以，在 Windows 上开发 React Native 应用，其实是在做一件“混合工程”：
- 你的 JSX 和 JS 文件 → 被 Metro 打包成 JS bundle；
- 这个 bundle → 被加载到一个真正的 Android 原生壳子里；
- 这个壳子 → 是由 Android SDK 编译出来的 APK；
- 编译过程 → 需要 JDK 来运行 Gradle；
- 安装和调试 → 靠
adb工具连接设备或模拟器。
换句话说：哪怕你一行 Java 都没写，你也必须把整套 Android 开发环境搭全了才行。
这就是为什么 React Native 环境配置比普通前端项目复杂得多的根本原因。
第一步：Node.js 和 npm —— 一切命令行工具的基础
React Native 的初始化命令npx react-native init看似简单，但背后全是 Node.js 在干活。
它是干什么的？
- Node.js：让 JavaScript 能在电脑上运行（不只是浏览器里）。
- npm：包管理器，负责下载和安装项目依赖（比如 React、Metro、Babel 等）。
没有它俩，连项目都创建不了。
怎么装最稳？
- 去官网 https://nodejs.org 下载LTS 版本（长期支持版），别贪新。
- 推荐 v18.x 或 v20.x，目前最稳定兼容。 安装时务必勾选：
☑ Add to PATH
否则你在 CMD 或 PowerShell 里敲node -v会提示“不是内部或外部命令”。装完打开终端验证：
node -v npm -v正常输出类似：
v18.17.0 9.6.7✅ 成功！说明 Node 和 npm 已经就位。
💡 小贴士：国内网络慢？可以换淘宝镜像加速依赖安装：
bash npm config set registry https://registry.npmmirror.com
这样以后装包速度快好几倍。
第二步：JDK 11 —— Android 构建系统的“发动机”
你以为 React Native 只靠 JS？错了。
当你运行npx react-native run-android的时候，背后启动的是Gradle—— 一套用 Java 写的构建系统。
而 Gradle 必须靠JDK来运行。
为什么非要 JDK 11？
- 太低不行（比如 JDK 8）：新版 Gradle 不支持。
- 太高也不行（比如 JDK 17+）：部分 Android 插件还不兼容。
- JDK 11 是当前黄金版本，Android Studio 默认推荐，React Native 社区广泛使用。
怎么装？
推荐使用 OpenJDK（开源免费）：
- 下载地址： https://adoptium.net
- 选择：Temurin 11 (LTS)→ Windows x64 Installer
安装完成后设置环境变量：
设置JAVA_HOME
- 按下
Win + S，搜“环境变量” → 点击“编辑系统环境变量” - 点击“环境变量”按钮
- 在“用户变量”或“系统变量”中新建：
- 变量名：JAVA_HOME
- 变量值：你的 JDK 安装路径，例如C:\Program Files\Eclipse Adoptium\jdk-11.0.15.10-hotspot
把bin加进PATH
在同一界面找到Path变量，编辑 → 新增一项：
%JAVA_HOME%\bin保存退出。
验证是否成功
打开新的 CMD 或 PowerShell（一定要新开！旧的不会读新变量）：
java -version javac -version如果都能打印出版本号，而且没有“不是命令”的错误，那就 OK 了。
⚠️ 常见坑点：
- 装了多个 JDK，系统用了别的版本 → 用where java查看实际调用路径。
- 忘记重启终端 → 环境变量没生效。
第三步：Android Studio + SDK —— 原生世界的入口
这是整个流程中最重的一环，但也最容易出问题。
为什么要装 Android Studio？
虽然你不用写 Java，但你需要：
-SDK Tools：编译工具（build-tools）、调试工具（adb）、打包工具（aapt）、模拟器（emulator）
-Gradle Wrapper（gradlew）：用来构建 Android 工程
-AVD Manager：创建安卓虚拟设备（模拟器）
这些全都在 Android Studio 里一键集成。
怎么装？
- 去官网下载： https://developer.android.com/studio
- 安装时保持默认选项即可（会自动装 SDK 到
AppData/Local/Android/Sdk）
安装完成后先打开一次 Android Studio，让它完成组件更新和初始化。
然后进入关键一步：SDK 配置
必须安装的 SDK 组件
打开 Android Studio → Preferences → Appearance & Behavior → System Settings → Android SDK
勾选以下内容：
| 类别 | 必装项 |
|---|---|
| SDK Platforms | 至少一个 API 级别（推荐 API 30 或 33） |
| SDK Tools | ✅ Android SDK Build-Tools ✅ Android SDK Platform-Tools ✅ Android Emulator ✅ Android SDK Tools (Obsolete) ✅ Intel x86 Emulator Accelerator (HAXM installer) |
🔔 注意：NDK 和 CMake 是可选的，除非你要写 C++ 原生模块，否则不用装。
设置ANDROID_HOME环境变量
这个变量告诉 React Native：“嘿，SDK 在这儿！”
通常路径是：
C:\Users\<你的用户名>\AppData\Local\Android\Sdk设置方法同上：
- 新建用户变量：
- 名称：
ANDROID_SDK_ROOT或ANDROID_HOME - 值：SDK 路径
再往Path里加这几条：
%ANDROID_SDK_ROOT%\platform-tools %ANDROID_SDK_ROOT%\emulator %ANDROID_SDK_ROOT%\tools %ANDROID_SDK_ROOT%\tools\bin💬 为什么加这么多？因为：
-adb在 platform-tools 里
-emulator命令在 emulator 目录下
-sdkmanager在 tools/bin 里
少了哪个，对应命令就找不到。
验证关键命令是否可用
新开终端，依次输入：
adb --version emulator -list-avds sdkmanager --version只要不报“不是命令”，基本就没问题。
第四步：初始化项目 & 跑起来！
所有准备工作做完后，终于可以动手了。
创建项目
npx react-native init MyAwesomeApp cd MyAwesomeApp📌 提示：不要用全局安装
react-native-cli，直接用npx更安全，避免版本冲突。
首次运行可能较慢（要下载模板 + 安装依赖），耐心等一会儿。
如果中途卡住或报错，检查：
- 是否设置了 npm 镜像？
- 网络是否正常？
- 磁盘空间是否足够？
启动 Metro 打包服务
npx react-native start浏览器会自动打开http://localhost:8081，看到 Metro 的界面就说明 JS 服务起来了。
启动安卓应用
另开一个终端窗口，运行：
npx react-native run-android这时会发生一系列事情：
1. Gradle 开始构建 Android 工程（第一次非常慢，耐心等）
2. 如果没连设备，会尝试启动模拟器
3. 编译成功后自动安装 APK 并打开应用
如果一切顺利，你会看到手机屏幕上出现：
Welcome to React Native!
🎉 恭喜你，环境通了！
常见问题 & 解决方案（实战经验总结）
❌ 问题1：Error: Could not find the Android SDK
原因：ANDROID_HOME没设对，或者路径有空格/中文。
解决：
- 检查变量值是否正确指向Sdk文件夹（不是 studio 安装目录！）
- 不要放在带空格的路径下（如Program Files），建议用默认路径
❌ 问题2：模拟器打不开 / 黑屏 / 卡死
原因：硬件加速未启用。
解决：
- 打开 AVD Manager，创建新虚拟设备时选择x86_64 镜像
- 安装 Intel HAXM（在 SDK Tools 里已包含）
- 或改用 ARM 镜像 + 软件渲染（更慢但兼容性好）
❌ 问题3：adb devices显示 offline 或无设备
物理设备连接失败常见原因：
- 未开启“开发者模式”和“USB 调试”
- USB 线只充电不传数据
- 驱动未安装（可用 Google USB Driver ）
❌ 问题4：Metro 启动失败，提示端口 8081 被占用
解决：
# 查看谁占用了 8081 netstat -ano | findstr :8081 # 结束对应 PID 的进程（替换为实际数字） taskkill /PID 1234 /F或者换个端口启动：
npx react-native start --port=8082记得同时修改run-android命令：
npx react-native run-android --port=8082一些实用技巧，让你少走弯路
✅ 使用.env文件管理配置（推荐）
在项目根目录创建.env文件，写入：
REACT_NATIVE_PACKAGER_HOSTNAME=localhost有助于解决某些局域网打包问题。
✅ 清理缓存三连击（万能救急）
当莫名其妙出错时，试试这套组合拳：
# 删除依赖 rm -rf node_modules && npm install # 清除 Metro 缓存 npx react-native start --reset-cache # 重置 Gradle（Android） cd android && ./gradlew clean && cd ..然后再重新运行。
✅ 查看安卓日志：react-native log-android
实时查看手机输出的日志，排查崩溃特别有用：
npx react-native log-android相当于adb logcat | grep ReactNativeJS
最后聊聊：要不要用 Expo？
如果你只是想快速上手、做个小 demo，Expo 是个不错的选择。
它的优势是：免配置！不用装 JDK、不用设环境变量，一行命令就能跑起来。
npx create-react-native-app MyApp --template cd MyApp npm run androidBut…
一旦你想接入原生功能（比如蓝牙、摄像头高级控制、自定义模块），就会发现 Expo 限制太多。
所以我的建议是：
初学者可以用 Expo 快速体验；真要做项目，请从原生 CLI 入门。
掌握完整环境配置的过程，本身就是理解 React Native 架构的最佳方式。
写在最后
React Native 的环境搭建确实有点烦，尤其是对刚入门的新手来说。
但它不是魔法，也不是玄学。
每一个步骤都有它的意义，每一个工具都在扮演不可或缺的角色。
Node.js 是起点，JDK 是引擎，Android SDK 是手脚，CLI 是指挥官。
它们协同工作，才让你写的 JS 能真正跑在手机上。
你现在遇到的问题，我们都经历过。
只要坚持把每一步走扎实，终会迎来那个激动人心的瞬间：
屏幕亮起，App 启动，控制台打出 “Hello from React Native!”
那一刻，所有的折腾都值得。
如果你在配置过程中还有任何疑问，欢迎留言讨论。我们一起把这条路走得更顺一点。
