屏东县网站建设_网站建设公司_网站开发_seo优化

从零开始：Windows 上搭建 React Native 开发环境的实战手记

你是不是也曾在尝试运行第一条npx react-native run-android命令时，被满屏红字报错劝退？
是不是下载了几个小时的 Android SDK，结果一执行构建就提示“找不到 JDK”？
别担心，这几乎是每个在 Windows 上初探 React Native 的开发者都会经历的“入门仪式”。

今天，我就以一个真实项目开发者的视角，带你一步步亲手搭起一套稳定可用的 React Native 环境。不讲空话、不套术语，只说你能用得上的实操经验——尤其是针对国内网络慢、路径带空格、版本不兼容这些“中国特色”的坑。

先搞清楚：我们到底在做什么？

React Native 并不是纯前端框架。它表面上写的是 JavaScript，但背后依赖一整套原生构建工具链。你可以把它想象成“用 JS 写逻辑，靠原生引擎跑效果”。

所以在 Windows 上开发 RN，本质上是让一台本不属于移动生态的电脑，模拟出能编译 Android 应用的能力。这就需要我们手动把所有“零件”拼好：

• Node.js：运行 JS 脚本和包管理；
• JDK：编译 Java 代码（Android 的核心语言）；
• Android SDK + Gradle：打包资源、生成 APK；
• Python 2.7（偶尔需要）：某些底层模块编译时会用到；
• 命令行工具链：连接设备、启动服务。

接下来，我们就按这个顺序，一个一个装，一个一个配。

第一步：Node.js 安装与镜像加速

React Native 的一切操作都始于npx和npm，所以 Node 是地基。

✅ 推荐做法：

1. 访问 https://nodejs.org ，下载LTS 版本（目前推荐 v18.x 或 v20.x）。
2. 安装时务必勾选“Add to PATH”——这是很多新手失败的根本原因。
3. 打开 CMD 或 PowerShell，输入：

node -v npm -v

如果能正常显示版本号，说明安装成功。

⚠️ 小心陷阱：不要使用 v14 或更早版本！新版 React Native 已不再支持。

🌟 国内加速技巧

默认 npm 源在国外，安装依赖可能卡住。立刻切换淘宝镜像：

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

这样以后每次npm install都会走国内 CDN，速度提升十倍不止。

你也可以创建.npmrc文件放在项目根目录或用户主目录，永久生效：

registry=https://registry.npmmirror.com

第二步：JDK 11 安装与环境变量配置

虽然你现在写的可能是 JavaScript，但 React Native 构建 Android 应用时，依然要调用 Java 编译器。因此，JDK 不可或缺。

为什么选 JDK 11？

• React Native 当前主流版本（0.68+）官方推荐 JDK 11；
• JDK 8 太老，安全性差；JDK 17+ 又太新，部分 Gradle 插件还不兼容。

下载与安装建议

去 Adoptium.net 下载 OpenJDK 11（免 Oracle 许可问题），选择 Windows x64 MSI 安装包即可。

安装完成后，设置两个关键环境变量：

💡 提示：路径中不要有空格！如果你看到PROGRA~1这种缩写，说明系统自动处理了空格路径，但某些脚本仍可能出错。

验证是否成功：

java -version javac -version

两者都应该输出类似：

openjdk version "11.0.21" 2023-10-17

第三步：Android Studio 与 SDK 配置（重点！）

这是整个流程中最容易翻车的一环。很多人以为装个 Android Studio 就完事了，其实远远不够。

方案选择：全量安装 vs 轻量配置

对于大多数人，我建议直接安装Android Studio，哪怕你不打算用它写代码。

👉 下载地址： https://developer.android.com/studio

安装过程中，默认会帮你装好 SDK。关键是记住 SDK 存放位置，通常是：

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

🔍 注意：AppData是隐藏文件夹，需开启“显示隐藏项目”才能看到。

必须安装的 SDK 组件

打开 Android Studio → SDK Manager，确保以下组件已安装：

• ✅ Android SDK Platform 30（或其他 API Level ≥28）
• ✅ Android SDK Build-Tools（推荐 30.0.2 或 34.0.0）
• ✅ Android SDK Platform-Tools（包含 adb）
• ✅ Android SDK Tools (Obsolete) ——别看名字过时，CLI 还在用！

或者用命令行一次性搞定（进入Sdk/tools/bin目录执行）：

sdkmanager "platforms;android-30" "build-tools;30.0.2" "platform-tools"

设置环境变量

同样要加三个系统变量：

保存后重启终端，运行：

adb version

如果有版本输出，说明 ADB 正常工作。

🌐 加速提示：国内下载 SDK 极慢？可以替换repositories.cfg使用清华 TUNA 镜像源：

修改文件路径：<SDK>/tools/lib/repositories.cfg

内容改为：

https://mirrors.tuna.tsinghua.edu.cn/android/repository/

第四步：初始化你的第一个 React Native 项目

现在轮到主角登场了。

React Native CLI 推荐使用npx方式调用，避免全局污染：

npx react-native init MyFirstApp

耐心等待几分钟，它会完成以下动作：
- 创建项目结构；
- 安装 JavaScript 依赖；
- 自动生成 Android/iOS 原生工程；
- 自动链接基础库。

📁 强烈建议：将项目放在英文路径下，比如D:\Projects\MyFirstApp，绝对不要放桌面或文档里（路径含中文或空格会导致 Gradle 报错）。

进入项目：

cd MyFirstApp

启动 Metro 打包服务：

npx react-native start

保持这个窗口运行，然后另开一个终端运行：

npx react-native run-android

这时候会发生什么？

1. Gradle 开始构建 Android 工程（首次非常慢，5~10分钟正常）；
2. 构建完成后自动安装 APK 到连接的设备或模拟器；
3. 应用启动，并从 Metro 服务器拉取 JS bundle。

如果一切顺利，你会在手机或模拟器上看到熟悉的欢迎界面：“Welcome to React Native!”

第五步：Python 2.7？真的还需要吗？

你可能会在网上搜到一堆教程说“必须安装 Python 2.7”，其实那是旧时代的遗物。

现状说明：

现代 React Native 项目基本不再直接依赖 Python。但当你安装某些 npm 包（特别是含 C++ 扩展的 native 模块）时，node-gyp可能会被触发，而它确实需要 Python 解释器。

是否需要装？

• 大多数情况下不需要；
• 如果你在运行npm install时报错出现gyp ERR! configure error，并且提示找不到 Python，则需要补装。

如何应对？

前往 Python 官网 下载Python 2.7.18（最后一个稳定版），安装后设置环境变量：

npm config set python python2.7

或者指定具体路径：

npm config set python "C:\Python27\python.exe"

❗注意：不要安装 Python 3.x！node-gyp 不兼容。

不过再次强调：除非明确报错，否则完全可以跳过这一步。

常见问题急救包（收藏备用）

❌ 问题一：Could not find the Android SDK

症状：运行run-android报错 “SDK not found”。

原因：ANDROID_HOME没设对，或路径错误。

解决方法：
1. 检查 SDK 实际路径；
2. 在系统环境变量中新建ANDROID_HOME，值为 SDK 根目录；
3. 重启命令行工具。

❌ 问题二：白屏 / Unable to load script from assets…

症状：应用启动后白屏，Logcat 显示无法加载 JS bundle。

原因：Metro 未正确提供 bundle，或 assets 目录缺失。

临时修复方案：

先手动创建 assets 目录并打包：

mkdir android\app\src\main\assets npx react-native bundle --platform android --dev false \ --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle

然后重新运行npx react-native run-android。

长远来看，应确保 Metro 正常运行且设备能访问http://<电脑IP>:8081。

❌ 问题三：真机调试连接失败

症状：adb devices看不到设备。

排查步骤：
1. 手机开启“开发者选项”和“USB调试”；
2. 数据线连接后，确认弹窗点击“允许”；
3. 运行adb kill-server && adb devices重试；
4. 尝试更换 USB 接口或数据线。

💡 小技巧：可以在手机上安装Platform App测试 adb 连通性。

我的推荐配置清单（2025 年仍适用）

写在最后：环境搭建的本质是什么？

很多人觉得“环境配置”是技术之外的琐事，其实不然。

一个好的开发环境，决定了你每天能否专注在业务逻辑本身，而不是浪费时间在修构建错误、找依赖冲突上。

而成功的环境搭建，不只是复制粘贴命令，更是理解各组件之间如何协作的过程：

• Node 跑 JS；
• JDK 编译 Java；
• SDK 提供 API；
• Gradle 把它们串起来；
• Metro 实时推送更新。

当你把这些“黑盒”变成清晰的认知，你就不再是“跟着教程走”的学习者，而是真正掌控工具的工程师。

所以，别怕第一次失败。多试几次，记下每一条报错，查清每一个路径——这才是成长最快的路。

如果你正在尝试搭建环境，欢迎留言分享你遇到的问题，我们一起解决。