安阳市网站建设_网站建设公司_展示型网站_seo优化

从零开始搭建 React Native 开发环境（Windows 全流程实战）

你是不是也曾在尝试运行第一个 React Native 项目时，被一堆报错搞得头大？
"Could not determine Java version"、"SDK location not found"、"Unable to load script from assets"……这些看似随机的错误背后，其实都指向同一个问题：开发环境没配好。

别担心，这不是你的问题。React Native 在 Windows 上的环境搭建，历来是新手入门前的最大“拦路虎”。它不像 Web 开发那样打开浏览器就能跑，而是涉及 Node.js、JDK、Android SDK 等多个底层工具链的协同工作——任何一个环节出错，整个流程就会卡住。

今天，我就带你手把手走一遍完整的 React Native 环境配置流程，不跳过任何细节，不甩锅给“自己查文档”，目标只有一个：让你在明天早上就能成功运行npx react-native run-android，看到那个熟悉的欢迎界面。

我们到底需要哪些核心组件？

在动手之前，先搞清楚我们为什么要装这些东西：

⚠️ 注意：即使你不用 Android Studio 写代码，也必须安装它来获取 SDK 和模拟器支持。

接下来我们就一步步来装。

第一步：安装 Node.js（JavaScript 的运行基础）

React Native 是用 JS 写的，所以第一步当然是让它能跑起来。

推荐做法：

前往 https://nodejs.org ，下载LTS 版本（目前是 v18.x 或 v20.x）。不要选 Latest，稳定压倒一切。

安装时勾选“Add to PATH”选项，这样命令行才能识别node和npm。

验证是否成功：

打开PowerShell 或 CMD，输入：

node -v npm -v

如果返回类似v18.17.0和9.6.7的版本号，说明安装成功 ✅

💡 小技巧：国内网络慢？可以切换到淘宝镜像加速依赖安装：

bash npm config set registry https://registry.npmmirror.com

第二步：配置 JDK（让 Gradle 能编译原生代码）

React Native 的 Android 工程使用 Gradle 构建系统，而 Gradle 必须依赖 JDK 才能运行。

版本选择很关键！

• RN 0.71+ 推荐 JDK 17
• 老版本可用 JDK 8，但新项目建议直接上 JDK 17

下载与安装

推荐使用 Adoptium （原 OpenJDK）提供的免安装版：

1. 访问： https://adoptium.net/temurin/releases/?os=windows
2. 下载JDK 17（x64 Installer）
3. 安装路径建议改为简单路径，例如：C:\Program Files\Java\jdk-17

设置环境变量

这是最容易出错的地方！必须手动设置两个变量：

1. 新建系统变量JAVA_HOME

• 变量名：JAVA_HOME
• 变量值：C:\Program Files\Java\jdk-17

2. 修改PATH，加入%JAVA_HOME%\bin

🧠 为什么这么做？因为 Gradle 会通过JAVA_HOME查找 JDK，而PATH决定了你能否在任意位置执行java和javac命令。

验证安装

java -version javac -version

你应该看到输出中包含17.0.xx字样。如果没有，请回头检查环境变量拼写是否有空格或斜杠错误。

第三步：安装 Android Studio 与 SDK（真正的重头戏）

这一步最耗时，但也最重要。Android SDK 不只是个库，它是一整套移动开发基础设施。

1. 下载并安装 Android Studio

官网地址： https://developer.android.com/studio

选择 “Download Options” → 下载Windows版本。

安装过程一路下一步即可。首次启动后，选择“Do not import settings”。

2. 安装 SDK 组件

进入主界面后，选择Custom Setup，确保勾选以下组件：

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM) —— 如果你是 Intel CPU
• Android Virtual Device

点击 Finish 完成初始安装。

3. 关键操作：安装 Command Line Tools

很多初学者忽略这一点，导致后面无法接受许可证或管理 SDK 包。

进入 Settings → Appearance & Behavior → System Settings → Android SDK → SDK Tools

勾选：
- ☑️Android SDK Command-line Tools (latest)

然后点击 Apply 开始下载。

🔥 没有这个组件，sdkmanager命令就不存在，后续步骤全部失败！

4. 设置ANDROID_HOME环境变量

默认 SDK 安装路径为：

C:\Users\<你的用户名>\AppData\Local\Android\Sdk

把这个路径设为系统变量：

• 变量名：ANDROID_HOME
• 变量值：上面那串路径（记得替换用户名）

然后把以下三个目录加入PATH：

%ANDROID_HOME%\platform-tools ← adb 工具在这里 %ANDROID_HOME%\emulator ← 启动模拟器要用 %ANDROID_HOME%\cmdline-tools\latest\bin ← sdkmanager 在这里

⚠️ 注意：如果你只装了 cmdline-tools，可能没有latest文件夹。如果有子文件夹叫3.x.x，请指向具体版本目录，或者手动创建一个latest符号链接。

5. 接受所有许可证（否则 build 失败！）

打开命令行，运行：

sdkmanager --licenses

你会看到一系列协议提示，按y逐个接受，直到完成。重点包括：

• Android SDK License
• Android SDK Platform-Tools License
• Intel x86 Atom_64 System Image License

❗ 如果中途断开，下次再运行会继续未完成的部分。

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

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

初始化项目

npx react-native init MyFirstApp

解释一下这条命令：
-npx：临时运行某个 npm 包，无需全局安装
-react-native init：拉取官方模板，生成包含 Android/iOS 工程的标准项目结构

首次运行可能需要几分钟（要下载几百 MB 的依赖），耐心等待。

💡 提示：项目名不能有空格或特殊字符，如-_也不要加。

进入项目目录：

cd MyFirstApp

第五步：配置模拟器并运行 App

方法一：使用 Android Studio 创建 AVD（推荐）

1. 打开 Android Studio
2. 进入Device Manager→ Create Device
3. 选择设备类型（如 Pixel 4）
4. 选择系统镜像（建议 API 30 或以上，即 Android 11+）
5. 启用Hardware GLES 2.0加速（提升性能）
6. 完成创建

回到 Device Manager，点击绿色三角按钮启动模拟器。

方法二：命令行启动（进阶）

查看已有 AVD 列表：

emulator -list-avds

假设你的设备名叫Pixel_4_API_30，则启动命令为：

emulator -avd Pixel_4_API_30 -netdelay none -netspeed full

第六步：真正运行起来！

确保模拟器已经完全启动（出现锁屏界面），然后回到项目根目录，执行：

npx react-native run-android

这个命令会自动完成以下几步：
1. 启动 Metro 打包服务器（如果还没启动）
2. 使用 Gradle 编译 Android 原生工程
3. 将 APK 安装到连接的设备（模拟器）
4. 启动应用并连接 JS Server

等待片刻，你应该会在模拟器中看到这样的画面：

🎉Welcome to React Native!
You can change this text and your app will automatically reload.

成功了！你现在是一个真正的 React Native 开发者了。

常见坑点与调试秘籍

别高兴太早，开发才刚刚开始。以下是我在带新人时常遇到的问题汇总：

❌ 问题1：Error: Cannot find module 'react-native'

👉 原因：node_modules没装全，或路径错了
✅ 解决方案：

rm -rf node_modules package-lock.json npm install

❌ 问题2：Could not determine java version from 'xx.x.x'

👉 原因：JDK 版本过高或 Gradle 不兼容
✅ 解决方案：
- 升级项目中的 Gradle 插件版本（修改android/build.gradle中的com.android.tools.build:gradle到最新版）
- 或降级 JDK 至 17

❌ 问题3：SDK location not found

👉 原因：local.properties缺失或路径不对
✅ 解决方案：
在android/目录下新建local.properties文件，内容如下：

sdk.dir=C\:\\Users\\<你的用户名>\\AppData\\Local\\Android\\Sdk

注意双反斜杠和转义符！

❌ 问题4：Unable to load script. Make sure you're either running a Metro server...

👉 原因：JS Server 没启动，或设备连不上
✅ 解决方案：
1. 先单独启动 Metro：
bash npx react-native start
2. 在模拟器中按Ctrl + M调出开发者菜单
3. 选择 “Reload” 或 “Debug JS Remotely”

实用建议：让开发更顺畅

💾 磁盘空间预留至少 15GB

Android SDK + 模拟器镜像轻松突破 10GB，尤其是多装几个 API 版本之后。

🛡 关闭杀毒软件或防火墙干扰

某些安全软件会阻止adb reverse或 Metro 的 8081 端口监听，导致热更新失效。

🖥 推荐搭配 VS Code 使用

轻量、高效，配合这些插件体验飞升：
-ESLint / Prettier：代码规范自动修复
-ES7+ React/Redux/React-Native Snippets：快速生成组件模板
-React Native Tools：调试支持

最后说几句心里话

我知道，这套环境配置听起来复杂得像在组装火箭。但你要明白：React Native 的强大之处，正是来自于它对原生能力的深度整合。它不是简单的 WebView 套壳，而是真正调用原生 UI 组件、摄像头、GPS 的跨平台框架——而这，就需要底层工具链的支持。

一旦你熬过了最初的配置阶段，后面的开发反而异常流畅：改一行代码，秒级热重载；一套逻辑，两端运行；前端技能平滑迁移移动端。

未来你还可以进一步探索：
- 使用Expo快速原型开发（免配置起步）
- 引入TypeScript提升类型安全
- 结合Redux Toolkit管理复杂状态
- 集成原生模块实现定制功能

但所有这一切的前提，是你能先把环境搭起来。

所以，别怕麻烦。照着这篇指南一步一步来，哪怕卡住半小时，也要坚持找到原因。当你第一次在模拟器里看到那个“Welcome to React Native”页面时，那种成就感，值得你为之奋斗。

现在，去试试吧。你的第一个跨平台 App，正在等着诞生。

如果你在过程中遇到了其他难题，欢迎留言交流。我们一起解决。