news 2026/4/15 13:48:30

React Native搭建环境项目应用准备：Windows篇

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
React Native搭建环境项目应用准备：Windows篇

Windows上从零搭建React Native开发环境：一份实战派指南

你是不是也遇到过这种情况？想用 React Native 写个 App，结果刚打开文档，就被一堆“安装 Node.js”“配置 JDK”“设置 ANDROID_HOME”搞得晕头转向。尤其是你在 Windows 上开发，网上教程五花八门，有的说必须装 Android Studio 全家桶，有的推荐用 Expo 躲开原生坑——到底该听谁的？

别急。这篇文章不讲空话，不堆术语，就带你从零开始，在 Windows 系统上一步步搭出一个能跑起来、能调试、能真机测试的 React Native 开发环境。我会把每个环节的关键点、常见坑和解决方案都揉进去，让你少走弯路。

为什么是 Windows？我们真的能好好开发吗？

先坦白：React Native 最初确实是为 macOS 设计的，毕竟 iOS 开发绕不开 Xcode。但如果你的目标是Android 应用，那 Windows 完全够用，而且越来越成熟。

现在官方支持通过Windows Subsystem for Android (WSA)或 Intel HAXM 加速模拟器，Gradle 构建流程也早已适配 Windows 路径规范。只要你避开几个典型陷阱，完全可以实现高效开发。

所以，本文聚焦于：
✅ 使用标准 React Native CLI（非 Expo）
✅ 支持真机调试 + 模拟器运行
✅ 配合 VS Code 实现完整编码体验
✅ 全程在 Windows 10/11 下完成

准备好了吗？咱们直接开干。

第一步：Node.js 和 npm —— 所有魔法的起点

React Native 的核心其实是 JavaScript。而让 JS 在电脑上运行的，就是Node.js。

要装哪个版本？

别乱下最新版！React Native 对 Node 版本很敏感。目前主流版本（如 0.72+）推荐使用：

✅Node.js 18.x LTS（长期支持版）

为什么不选 20 或 21？因为很多依赖还没跟上，容易出现unsupported engine报错。

怎么安全安装？

去官网下载 https://nodejs.org ，选择LTS 版本安装包（.msi格式）。安装时注意：

  • ✅ 勾选 “Add to PATH”（否则后面命令找不到）
  • ❌ 不要自定义安装路径到带空格或中文的地方（比如C:\Program Files\...就容易出问题）

安装完成后，打开PowerShell 或 CMD（不是 Git Bash！部分脚本兼容性差），输入：

node -v npm -v

你应该看到类似输出：

v18.17.0 9.6.7

如果有版本号，说明成功了。

💡 小技巧：如果你想同时管理多个 Node 版本（比如测试不同项目），可以用 nvm-windows 。但它不是必需品，新手建议先装固定版本。

第二步：JDK 11 —— Android 编译背后的“Java 引擎”

虽然你写的是 JavaScript，但最终打包成 APK 还得靠 Android 的构建系统 —— Gradle。而 Gradle 是用 Java 写的，所以你需要JDK（Java Development Kit）。

要不要装 Oracle JDK？

不用。现在社区普遍推荐开源免费的OpenJDK，来自 Eclipse Adoptium （以前叫 AdoptOpenJDK）。

下载JDK 11（注意不是 JRE！JRE 只能运行不能编译）：
👉 https://adoptium.net/temurin/releases/?version=11

选择：
- Architecture: x64
- Operating System: Windows
- Package Type:.msi（方便安装）

安装完后，必须设置环境变量JAVA_HOME。

怎么设置 JAVA_HOME？

  1. 按Win + S搜索 “环境变量”
  2. 点击 “编辑系统环境变量”
  3. 点 “环境变量” 按钮
  4. 在“用户变量”或“系统变量”中点击“新建”
    - 变量名：JAVA_HOME
    - 变量值：你的 JDK 安装路径，例如C:\Program Files\Eclipse Adoptium\jdk-11.0.18.10-hotspot

然后检查PATH是否包含%JAVA_HOME%\bin

最后验证：

java -version javac -version

如果都显示版本信息，恭喜，Java 已就位。

第三步：Android Studio + SDK —— 原生世界的入口

这一步最耗时间，但也最关键。

为什么非得装 Android Studio？

因为 React Native 的 Android 工程本质上是一个标准的 Android 项目。你要编译、打包、调试，全都依赖 Android SDK 提供的工具链，比如：

  • adb：连接设备
  • emulator：启动模拟器
  • aapt：资源打包
  • gradlew：构建脚本执行器

这些都在 Android Studio 安装过程中自动搞定。

怎么装才不踩坑？

  1. 下载 Android Studio： https://developer.android.com/studio
  2. 安装时勾选以下组件：
    - Android SDK
    - Android SDK Platform-Tools
    - Android SDK Build-Tools
    - Android Emulator
    - Performance (Intel ® HAXM)（如果你 CPU 支持虚拟化加速）

⚠️ 重要提示：建议将 SDK 安装路径改为无空格、无中文的目录，比如C:\Android\Sdk

设置 ANDROID_HOME 环境变量

同样在“环境变量”里添加：

变量名值
ANDROID_HOMEC:\Android\Sdk

并在PATH中追加三项：

%ANDROID_HOME%\platform-tools %ANDROID_HOME%\tools %ANDROID_HOME%\emulator

保存后重启终端。

验证是否生效：

adb version emulator -list-avds

前者应显示 ADB 版本，后者列出已创建的虚拟设备（目前为空也没关系）。

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

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

创建项目

打开 PowerShell，进入你想存放项目的文件夹，运行：

npx react-native@latest init MyFirstApp

这个命令会做几件事：
- 下载最新的 React Native 模板
- 自动生成android/和ios/目录结构
- 安装所有 JS 依赖（react, react-native, metro 等）

等待几分钟，直到看到 “Welcome to React Native!” 成功提示。

启动 Metro 打包服务

进入项目目录：

cd MyFirstApp npx react-native start

浏览器会自动打开http://localhost:8081/debugger-ui（这是可选的调试界面），终端显示 Metro 正在监听文件变化。

保持这个窗口开着——它是代码热更新的大脑。

第五步：运行在模拟器或真机上

方法一：用 Android 模拟器

回到另一个终端窗口，运行：

npx react-native run-android

这时会发生一系列操作：
1. Metro 开始打包 JS bundle
2. Gradle 开始构建 debug APK
3. 如果没有正在运行的模拟器，RN 脚本会尝试自动启动第一个 AVD

但问题来了：你还没有 AVD 啊！

创建一个 Android 虚拟设备（AVD）

打开 Android Studio → Configure → AVD Manager → Create Virtual Device

选择一台设备（比如 Pixel 4）→ 选择系统镜像（推荐 API 30+ 的 x86_64 镜像）→ Finish

创建完成后，你可以手动启动它：

emulator -avd Your_AVD_Name -netdelay none -netspeed full

等模拟器完全启动后，再运行npx react-native run-android，就会自动安装并启动 App。

💡 提示：首次构建可能需要十几分钟，Gradle 要下载各种依赖。后续构建会快很多。

方法二：连接真机调试（更推荐！）

插上手机，打开 USB 调试模式（开发者选项里开启）。

然后执行：

adb devices

你会看到类似：

List of devices attached R58M9XXXXX device

表示设备已识别。

接着运行：

npx react-native run-android

App 会自动安装到手机上，并通过 Wi-Fi 或 USB 与 Metro 建立连接加载 JS bundle。

🔧 如果遇到白屏？摇一摇手机调出开发者菜单 → Debug → Enable Live Reload / Hot Reloading

常见问题 & 解决方案（亲测有效）

❌ 报错：Could not find an installed version of Gradle

原因：Gradle Wrapper 下载失败（国内网络问题）

解决办法：
1. 进入android/gradle/wrapper/gradle-wrapper.properties
2. 查看distributionUrl地址，通常是：
https\://services.gradle.org/distributions/gradle-8.0-all.zip
3. 手动用浏览器或代理下载这个 zip 包
4. 放到本地缓存目录：
C:\Users\你的用户名\.gradle\wrapper\dists\gradle-8.0-all\<随机文件夹>
5. 再次运行./gradlew，它会跳过下载直接解压

❌ 白屏 / Unable to load bundle

原因：Metro 服务器没连上，或者防火墙阻止了 8081 端口

解决方法：
1. 确保 Metro 正在运行
2. 在开发者菜单中点击 “Dev Settings” → “Debug server host & port for device”
3. 输入你的电脑局域网 IP + 端口，例如：192.168.31.100:8081
4. 返回主界面，重新加载 JS

📌 如何查本机 IP？在 CMD 输入ipconfig，找 IPv4 地址

❌ Execution failed for task ‘:app:processDebugResources’

经典资源编译错误。

排查步骤：
1. 打开 Android Studio → SDK Manager
2. 确认已安装当前项目所需的 Build Tools 版本（查看android/build.gradle中的buildToolsVersion）
3. 清理缓存：
bash cd android ./gradlew clean cd .. npx react-native run-android

推荐工具组合：VS Code + 插件加持

别用记事本写代码！推荐搭配：

  • Visual Studio Code
  • 必装插件：
  • ESLint
  • Prettier
  • React Native Tools（微软官方）
  • IntelliSense for CSS class names

快捷键小贴士：
-Ctrl + Shift + P→ 输入 “React Native” 可快速启动命令
- 修改代码后保存即自动刷新（开启 Hot Reloading 后）

最后一点思考：要不要用 Expo？

我知道你在想什么：“Expo 不是更简单吗？”

确实，Expo Go 可以让你免配置直接扫码预览，适合快速原型验证。但它也有局限：

  • ❌ 无法自由集成第三方原生模块（如特定蓝牙库）
  • ❌ 自定义启动画面、推送通知等受限
  • ❌ 到后期还是要 “eject” 回原生工程，反而更麻烦

所以我建议：

✅ 初学者可以试试 Expo 快速上手
✅ 但要做真实项目，早点熟悉原生环境才是正道

结语：环境只是开始，真正的挑战在代码里

看到 App 图标出现在手机屏幕上那一刻，你会觉得前面所有的等待和折腾都值得。

但这只是第一步。接下来你要面对的是状态管理、导航架构、性能优化、跨平台适配……那些才是真正考验功力的地方。

不过没关系，至少现在，你的开发环境已经 ready 了。

下一步，我们可以聊聊：
- 如何用 React Navigation 实现页面跳转？
- 怎样接入 AsyncStorage 做本地存储？
- 有没有轻量级的状态管理方案？

如果你感兴趣，欢迎留言告诉我你想了解的方向。我们一起，把 React Native 玩明白。

你现在准备好敲下第一行App.js了吗？

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/4/11 11:35:58

多版本 JDK 安装与配置

一、概述 当不同项目可能需要不同Java版本&#xff0c;这时我们需要在同一台机器上安装多个版本的JDK&#xff0c;并能够方便地切换。主要通过以下步骤实现&#xff1a; 下载JDK&#xff1a;从Oracle官网或OpenJDK网站下载所需的JDK版本。安装JDK&#xff1a;可以将不同版本的…

作者头像 李华
网站建设 2026/4/15 6:45:31

JasperSoft Studio在零售业数据分析中的5个实战案例

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个零售业数据分析模板库&#xff0c;包含&#xff1a;1) 库存周转率分析报表&#xff1b;2) 门店销售热力图&#xff1b;3) 会员消费行为分析&#xff1b;4) 促销活动效果评…

作者头像 李华
网站建设 2026/4/8 23:27:03

火山引擎AI大模型对比：GLM-4.6V-Flash-WEB有何优势？

火山引擎AI大模型对比&#xff1a;GLM-4.6V-Flash-WEB有何优势&#xff1f; 在如今的智能应用开发中&#xff0c;一个现实问题正变得越来越突出&#xff1a;我们手握强大的多模态大模型&#xff0c;却常常“用不起来”。不是效果不够好&#xff0c;而是跑得太慢、太贵、太重——…

作者头像 李华
网站建设 2026/4/13 23:19:20

零基础学会Python镜像源配置：图文详解

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个交互式Python镜像源配置助手&#xff0c;功能包括&#xff1a;1. 图形化界面&#xff08;Tkinter&#xff09;显示当前源配置 2. 提供主流镜像源一键切换按钮 3. 测试连接…

作者头像 李华
网站建设 2026/4/13 16:50:21

闪电开发：用NEXT AI DRAWIO快速验证产品原型

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个基于NEXT AI DRAWIO的快速原型工具&#xff0c;能够根据产品描述自动生成UI流程图和交互原型。要求支持&#xff1a;1&#xff09;从文字需求生成初始原型 2&#xff09;拖…

作者头像 李华
网站建设 2026/4/10 13:59:01

在线电路仿真辅助高校电路原理教学的探索

用一块“虚拟面包板”点亮电路课堂&#xff1a;在线仿真如何重塑高校电路教学在讲授《电路原理》的第十年&#xff0c;我仍会遇到同样的问题——当我在黑板上画出一个RLC串联电路&#xff0c;写下微分方程&#xff0c;再推导出其欠阻尼响应时&#xff0c;台下总有学生皱眉&…

作者头像 李华