0

0

使用VSCode进行React Native开发:环境配置与调试

P粉986688829

P粉986688829

发布时间:2026-01-01 14:03:35

|

645人浏览过

|

来源于php中文网

原创

若VSCode调试React Native失败,需依次配置工具链(Node.js、JDK、Xcode)、安装VSCode扩展并设置launch.json、确保ADB识别设备或启用Safari Web Inspector、清除Metro缓存及释放8081端口。

使用vscode进行react native开发:环境配置与调试

如果您希望在本地使用 VSCode 开发 React Native 应用,但项目无法正常启动或调试器无法连接,则可能是开发环境未正确配置或调试通道未建立。以下是完成环境配置与调试支持的具体操作步骤:

本文运行环境:MacBook Air,macOS Sequoia。

一、安装必备工具链

React Native 依赖 Node.js、Java Development Kit(JDK)、Android SDK 或 Xcode 等底层工具,缺少任一组件都将导致项目初始化失败或模拟器无法运行。

1、访问官网 nodejs.org 下载并安装 LTS 版本 Node.js,安装完成后在终端执行 node -vnpm -v 验证版本。

2、前往 adoptium.net 下载并安装 JDK 17,安装后运行 java -version 确认输出为 17.x。

3、macOS 用户从 Mac App Store 安装 Xcode,并在终端中运行 sudo xcode-select --install 安装命令行工具;同时打开 Xcode 进入 Preferences > Locations,确认 Command Line Tools 已选中。

二、配置 VSCode 扩展与工作区设置

VSCode 默认不支持 React Native 的语法高亮、自动补全与断点调试,需手动启用对应扩展并配置 launch.json 以启用调试会话。

1、在 VSCode 扩展市场中搜索并安装 React Native ToolsES7+ React/Redux/React-Native/JS snippetsPrettier

2、在项目根目录下创建 .vscode 文件夹,内部新建 settings.json,添加内容:{"editor.defaultFormatter": "esbenp.prettier-vscode", "javascript.preferences.importModuleSpecifier": "relative"}

3、在项目根目录执行 npx react-native init MyApp 初始化项目后,进入项目文件夹,在 VSCode 中按 Cmd+Shift+P 打开命令面板,输入 React Native: Configure CodeLens 并执行。

三、启动 Android 调试会话

Android 调试需确保 ADB 正常识别设备或模拟器,并通过 Metro 服务与 Chrome DevTools 协同通信,调试器才能附加到 JS 线程。

1、启动 Android 模拟器(如 Pixel 4 API 34),或连接真机并开启 USB 调试模式。

多商户双网版电子商城CRMEB系统
多商户双网版电子商城CRMEB系统

基于ThinkPhp6+ swoole4+uniapp 开发的一套CRMEB新零售多商户商城系统。如果不会搭建请到 查看搭建说明系统环境推荐 使用 宝塔配置环境centos PHP7.3 mysql5.6新增功能: 01·新增支持销售虚拟产品自动发货 02.支持销售链接与卡密可导入导出 03.自定义后台路径对后台进行保护 04.新增支持商家缴纳保证金功能 05·违法或侵权商品一键举报功能 06·仲

下载

2、在终端中运行 adb devices,确认设备状态显示为 device 而非 offline 或空列表。

3、在 VSCode 中打开项目,点击左侧活动栏的调试图标,选择 React Native Android 配置,点击绿色三角形启动调试。

四、启用 iOS 设备远程调试

iOS 调试不依赖 ADB,而是通过 Safari Web Inspector 连接 WebView 实例,需在系统级和应用级同步开启开发者选项与远程自动化功能。

1、在 macOS 系统设置中进入 隐私与安全性 > 开发者模式,启用该开关并重启终端。

2、在 iOS 设备上进入 设置 > Safari > 高级,打开 Web 检查器

3、在 VSCode 中运行 npx react-native run-ios 启动应用,随后在 macOS 上打开 Safari,进入 开发 > [设备名称] > [App Name],即可查看控制台日志与 DOM 结构。

五、修复常见调试连接失败问题

当 VSCode 显示 “Cannot connect to the target” 或 “Debug adapter process has terminated unexpectedly”,通常由端口冲突、Metro 未就绪或权限限制引起,可尝试以下独立方案:

1、在项目根目录执行 npx react-native start --reset-cache 清除 Metro 缓存并重启服务。

2、关闭所有正在运行的 Metro 窗口,在终端中运行 lsof -i :8081 查找占用进程,再用 kill -9 [PID] 强制释放端口。

3、在 iOS 模拟器中打开应用后,摇动设备唤出开发者菜单,点击 Debug,等待 VSCode 自动弹出调试窗口;若无响应,手动在 VSCode 调试侧边栏点击 重新启动 按钮。

相关专题

更多
java
java

Java是一个通用术语,用于表示Java软件及其组件,包括“Java运行时环境 (JRE)”、“Java虚拟机 (JVM)”以及“插件”。php中文网还为大家带了Java相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

825

2023.06.15

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

724

2023.07.05

java自学难吗
java自学难吗

Java自学并不难。Java语言相对于其他一些编程语言而言,有着较为简洁和易读的语法,本专题为大家提供java自学难吗相关的文章,大家可以免费体验。

728

2023.07.31

java配置jdk环境变量
java配置jdk环境变量

Java是一种广泛使用的高级编程语言,用于开发各种类型的应用程序。为了能够在计算机上正确运行和编译Java代码,需要正确配置Java Development Kit(JDK)环境变量。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

395

2023.08.01

java保留两位小数
java保留两位小数

Java是一种广泛应用于编程领域的高级编程语言。在Java中,保留两位小数是指在进行数值计算或输出时,限制小数部分只有两位有效数字,并将多余的位数进行四舍五入或截取。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

398

2023.08.02

java基本数据类型
java基本数据类型

java基本数据类型有:1、byte;2、short;3、int;4、long;5、float;6、double;7、char;8、boolean。本专题为大家提供java基本数据类型的相关的文章、下载、课程内容,供大家免费下载体验。

445

2023.08.02

java有什么用
java有什么用

java可以开发应用程序、移动应用、Web应用、企业级应用、嵌入式系统等方面。本专题为大家提供java有什么用的相关的文章、下载、课程内容,供大家免费下载体验。

428

2023.08.02

java在线网站
java在线网站

Java在线网站是指提供Java编程学习、实践和交流平台的网络服务。近年来,随着Java语言在软件开发领域的广泛应用,越来越多的人对Java编程感兴趣,并希望能够通过在线网站来学习和提高自己的Java编程技能。php中文网给大家带来了相关的视频、教程以及文章,欢迎大家前来学习阅读和下载。

16881

2023.08.03

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

7

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 0.9万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号