尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

VS Code 搭建 React Native 开发环境(Windows 实战指南)

VS Code 搭建 React Native 开发环境(Windows 实战指南) 本文只关注VS Code 下运行 React NativeAndroid的完整配置包括插件、环境变量与调试方式。不涉及 Android Studio 安装过程。一、目标在 VS Code 中实现运行 React Native 项目代码规范ESLint Prettier支持调试Hermes提升开发效率二、必装 VS Code 插件在 Visual Studio Code 扩展市场安装以下插件1. React Native Tools必须React Native Tools功能运行 React Native 项目连接调试Hermes日志查看2. ESLint代码质量ESLint功能实时语法检查统一代码风格避免低级错误3. Prettier代码格式化Prettier功能自动格式化代码与 ESLint 配合使用三、核心问题在 VS Code 终端运行npx react-native run-android依赖组件作用adb设备通信emulator启动模拟器JavaJDKGradle 构建 未配置会报错adb 不是内部命令JAVA_HOME is not setNo emulators found四、环境变量配置关键1. ANDROID_HOMEANDROID_HOME D:\7_Programs\Android\Sdk2. JAVA_HOMEJAVA_HOME D:\7_Programs\Android Studio\jbr3. Path 配置D:\7_Programs\Android\Sdk\platform-tools D:\7_Programs\Android\Sdk\emulator D:\7_Programs\Android Studio\jbr\bin⚠️ 注意使用完整路径避免变量展开问题修改后必须重启 VS Code环境变量配置截图五、验证环境adb version emulator -list-avds java -version验证PS D:\1_Project\Android\AwesomeProject adb version Android Debug Bridge version 1.0.41 Version 37.0.0-14910828 Installed as D:\7_Programs\Android\Sdk\platform-tools\adb.exe Running on Windows 10.0.26200 PS D:\1_Project\Android\AwesomeProject emulator -list-avds Pixel_10 PS D:\1_Project\Android\AwesomeProject java -version java version 21.0.11 2026-04-21 LTS Java(TM) SE Runtime Environment (build 21.0.119-LTS-211) Java HotSpot(TM) 64-Bit Server VM (build 21.0.119-LTS-211, mixed mode, sharing)六、运行项目cd D:\1_Project\Android\AwesomeProject npx react-native run-android成功标志BUILD SUCCESSFUL Installing APK... Starting: Intent ...运行效果七、VS Code 调试配置推荐❌ 不推荐方式type: reactnative问题Windows 下易出现spawn EINVAL✅ 推荐方式Attach 模式.vscode/launch.json{ version: 0.2.0, configurations: [ { name: Attach to Hermes, type: reactnativedirect, request: attach, cwd: ${workspaceFolder}, platform: android } ] }使用流程1. 终端运行 run-android 2. VS Code 按 F5 3. 连接调试八、常见问题1. JAVA_HOME 未生效 重新打开 VS Code2. adb 找不到 检查 platform-tools 是否加入 Path3. spawn EINVAL 不用 F5 启动项目改用终端至此你已经完成一套稳定、可扩展的 React Native 开发环境。最后Android Studio安装教程https://blog.csdn.net/summer___cold/article/details/135421493
返回列表