鸿蒙智行 L3 内测启幕：从手艺架构到商用落地的全链路技能拆
2026/1/18 8:19:58
从零开始：在 Windows 上亲手搭建 React Native 开发环境（新手友好实战指南）
你是不是也曾在搜索引擎里反复输入“react native搭建环境”“Windows 跑不起来 RN 项目”这类关键词，却依然卡在某个报错界面动弹不得？别担心，这几乎是每个初学者都会经历的“入门仪式”。
今天，我们就来彻底解决这个痛点——用最真实、最接地气的方式，带你从零开始，在 Windows 系统上一步步配好 React Native 的全套开发环境。不跳坑，不省略，连 PowerShell 权限这种“小细节”都给你讲明白。
准备好了吗？我们直接开干。
第一步：你要先明白，RN 到底依赖哪些“零件”？
很多人一上来就猛敲命令行，结果run-android报一堆错才意识到：“哦，原来还得装 Java？”
所以咱们先搞清楚：React Native 在 Windows 上运行，到底需要哪几块拼图？
简单来说，是这五样：
- Node.js + npm→ 让 JavaScript 能跑起来
- JDK（Java 17）→ 编译 Android 原生代码要用
- Android Studio + SDK→ 提供模拟器和打包工具
- React Native CLI→ 创建项目、启动服务的核心命令
- PowerShell 执行策略设置→ 否则脚本根本跑不动
别怕，接下来我们一个一个来，像搭积木一样稳扎稳打。
1. 安装 Node.js：让 JS 不只是网页里的玩具
React Native 是用 JavaScript 写的，但显然不能靠浏览器执行。它靠的是Node.js—— 可以理解为“把 JS 搬到电脑本地运行”的引擎。
✅ 推荐版本：一定要选LTS（长期支持版），比如 v18 或 v20。不要追新！
怎么装？
- 打开官网 https://nodejs.org
- 下载Windows Installer (.msi)，选择 LTS 版本
- 安装时务必勾选“Add to PATH”！这是后面能全局使用
npm的关键
验证是否成功？
打开 CMD 或 PowerShell，输入：
node -v npm -v如果返回了版本号（如v18.17.0和9.6.7），恭喜，第一关过了！
💡 小贴士：国内网络慢？可以换淘宝镜像加速：
bash npm config set registry https://registry.npmmirror.com
2. JDK 17：给 Android 编译系统“供能”
你以为 React Native 是纯 JS？错。它的 UI 最终要翻译成原生控件，这部分工作是由 Android 的构建系统（Gradle）完成的，而 Gradle 必须运行在 JVM 上 —— 所以你需要JDK。
⚠️ 注意：不是 JRE！JRE 只能运行程序，不能编译；只有 JDK 才完整。
为什么是 JDK 17？
因为从 Android Gradle Plugin 7.0 开始，官方明确要求使用 JDK 17。你的 Android Studio 版本只要不是太老，就必须跟上。
哪里下载？
推荐使用 Adoptium.net 的Temurin JDK 17
- 下载
.msi安装包 - 默认路径安装即可（通常是
C:\Program Files\Eclipse Adoptium\jdk-17.x.x-hotspot）
设置环境变量：JAVA_HOME
这是最容易被忽略的关键一步！
操作步骤：
- 右键“此电脑” → “属性” → “高级系统设置”
- 点击“环境变量”
- 在“系统变量”中点击“新建”
- 变量名：JAVA_HOME
- 变量值：你的 JDK 安装路径（例如C:\Program Files\Eclipse Adoptium\jdk-17.0.8.7-hotspot） - 确认保存
🔍 检查方法：重启终端后运行
bash echo %JAVA_HOME%应该输出你设置的路径。
3. Android Studio：不只是 IDE，更是“工具箱大礼包”
哪怕你不用 Android Studio 写代码，你也必须装它 —— 因为 React Native 构建 Android 应用所需的 SDK、adb、模拟器全都在这里面。
下载与安装
- 官网下载 developer.android.com/studio
- 安装过程中会自动提示安装 SDK，默认路径通常是：
C:\Users\你的用户名\AppData\Local\Android\Sdk
必须安装的 SDK 组件
打开 Android Studio → 进入SDK Manager（可通过菜单 Configure → SDK Manager），确保勾选以下内容：
| 组件 | 说明 |
|---|---|
| Android SDK Platform | 至少选一个 API 级别（推荐 API 34） |
| Android SDK Platform-Tools | 包含adb，设备通信核心 |
| Android SDK Build-Tools | 推荐34.0.0或更高 |
| Intel x86 Atom_64 System Image | 模拟器用的系统镜像 |
点击 Apply 下载安装。
设置另一个关键环境变量：ANDROID_HOME
虽然新版 Gradle 已经更倾向通过local.properties文件读取 SDK 路径，但为了兼容性和稳定性，手动设置ANDROID_HOME仍是最佳实践。
操作方式同上：
- 变量名：
ANDROID_HOME - 变量值：你的 SDK 路径（如
C:\Users\xxx\AppData\Local\Android\Sdk）
然后还要把两个工具加入PATH：
%ANDROID_HOME%\platform-tools→ 用于adb devices%ANDROID_HOME%\emulator→ 用于命令行启动模拟器（可选）
🔄 修改完环境变量后，记得重新打开终端才能生效！
4. 安装 React Native CLI：项目的“启动器”
现在轮到主角登场了。
React Native 官方提供了命令行工具来创建和管理项目，叫做React Native CLI。
❗注意：不是
react-native-cli（已废弃），而是@react-native-community/cli
安装命令：
npm install -g @react-native-community/cli验证是否成功：
npx react-native --version你应该看到类似这样的输出：
info Fetching system and libraries information... System: OS: Windows 10 CPU: (8) x64 Intel Core i7 Binaries: Node: 18.17.0 Yarn: Not Found npm: 9.6.7 Watchman: Not Found Managers: Android SDK: ✅ IDEs: Android Studio: ✅如果有绿色对勾 ✅，说明环境检测通过，离成功不远了！
5. 解决隐藏杀手：PowerShell 脚本权限问题
很多新手在运行npx react-native run-android时遇到这个错误：
“无法加载文件…因为在此系统上禁止运行脚本。”
这不是 React Native 的锅，而是 Windows 的安全策略在作祟。
如何修复？
以管理员身份打开PowerShell，运行：
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser然后输入Y确认。
✅ 解释一下：
RemoteSigned表示允许本地脚本无签名运行，远程脚本需签名 —— 安全又实用。⚠️ 千万别用
Unrestricted，那等于给病毒开门。
动手时刻：创建你的第一个 React Native 项目！
所有准备工作就绪，现在我们正式创建项目。
步骤 1：初始化项目
npx react-native init MyFirstApp cd MyFirstApp💡 为什么用
npx？因为它会自动拉取最新稳定版 CLI，避免全局污染，还能保证版本一致。
这个过程可能有点久（首次要下载 gradle wrapper、依赖库等），耐心等待。
步骤 2：连接设备或启动模拟器
你可以选择两种方式运行 App：
方式一：物理手机（推荐新手试一次）
- 用 USB 数据线连接手机
- 在手机上开启“开发者选项”和“USB 调试”
- 终端输入
adb devices查看是否识别
方式二：Android 模拟器（更方便调试）
- 打开 Android Studio → AVD Manager
- 创建一个新的虚拟设备（建议选 Pixel 4 或 Nexus 系列，API Level 34）
- 启动模拟器
步骤 3：运行项目！
回到项目目录，执行：
npx react-native run-android你会看到一系列日志滚动：
- Metro Bundler 自动启动（监听 JS 文件变化）
- Gradle 开始编译原生代码
- APK 安装到设备/模拟器
- App 自动打开
几秒后，屏幕上出现熟悉的欢迎界面：
“Welcome to React Native!”
“You can start editing this app with any text editor…”
成了！🎉
常见问题急救包：这些坑我都替你踩过了
| 问题现象 | 原因分析 | 解决方案 |
|---|---|---|
SDK location not found | ANDROID_HOME没设对 | 检查环境变量，重启终端 |
Could not find gradle-wrapper.jar | 网络中断导致下载失败 | 手动补全android/gradle/wrapper/gradle-wrapper.jar（可以从其他项目复制） |
| Metro 服务没启动 | 可能被杀毒软件阻止 | 手动运行npx react-native start |
| 黑屏/白屏 | Bundle 没加载成功 | 清缓存：npx react-native start --reset-cache |
| Unable to load script from assets | 资源未打包 | 运行cd android && ./gradlew clean后重试 |
| 模拟器启动极慢 | 缺少硬件加速 | Intel 用户安装 HAXM；或启用 WSA（Windows Subsystem for Android） |
💬 一个小经验：每次改完环境变量或装完新工具，一定要重启终端，否则容易“明明配了却无效”。
提升效率：几个值得养成的好习惯
1. 使用 Yarn 替代 npm（可选但推荐）
Yarn 安装速度快，锁定机制更强，适合团队协作。
npm install -g yarn yarn install以后就可以用yarn android替代npx react-native run-android。
2. 清理缓存三连击
当项目出问题时，试试这套组合拳：
# 清 Metro 缓存 npx react-native start --reset-cache # 清 Gradle 缓存 cd android && ./gradlew clean && cd .. # 清除 node_modules（极端情况） rm -rf node_modules && npm install3. 关闭杀毒软件干扰
某些安全软件（如 360、McAfee）会误杀adb.exe或node.exe，导致连接失败。临时关闭试试。
Expo vs CLI？我该怎么选？
你可能会听说Expo更简单，那要不要用它？
| 对比项 | React Native CLI | Expo |
|---|---|---|
| 是否需要原生环境 | ✅ 需要自己配置 | ❌ 不需要 |
| 能否修改原生代码 | ✅ 可直接编辑 | ❌ 需 eject 才能进入“裸金属”模式 |
| 上手速度 | ⚠️ 较慢，门槛高 | ✅ 极快，扫码即用 |
| 功能扩展性 | ✅ 几乎无限（可集成任意原生 SDK） | ⚠️ 受限于 Expo 支持的插件 |
🎯 我的建议：如果你想真正掌握 React Native，一定要从 CLI 入门。Expo 适合快速原型，但企业级项目绕不开原生集成。
写在最后：环境搭建，其实是工程思维的第一课
很多人觉得“react native搭建环境”只是个技术活，其实不然。
它教会你的是：
- 如何阅读错误日志
- 如何排查依赖关系
- 如何管理路径和版本
- 如何面对不确定性并逐步推进
这些能力，远比写一个组件重要得多。
当你终于看到那个“Welcome to React Native”的界面时，请记住这一刻 —— 这是你作为移动开发者迈出的第一步，也是最关键的一步。
下一步，就是去修改App.js里的文字，让它变成你自己的名字。
然后你会发现：原来改变世界，不过是从改一行代码开始的。
如果你在实操中遇到了本文没覆盖的问题，欢迎留言讨论。我们一起把这条路走得更平一些。