react native 如何用vs code 进行调试
2023-09-14 09:01:09 时间
前言
以前做react-native 写的文章,在此分享一下。
在react-native 中有两种方式调试,一种是crome 调试,一种是本地调试,接下来介绍的是本地调试。
解决方案
在vs code 中,必须安装一个工具才可以使用:
接下来介绍使用方式:
先来一张大图,嗯,是的一张大图。
这时候,我们调试的是Debug Android.
那么就选择添加它好了,至于怎么配置,请看大屏幕,添加配置按钮。
然后按F1,这时候是很好的快捷键,选择启动模式,嗯,很开心的启动模式,看图:
请看第一个,react native:Run android on simulator
就是这个,设置启动模式。
很开心了,那么这个时候其实,已经可以调试了。
是的,的确如此。
如果无法启动,请确定是否安装了react dev tools
但是对于react native 来说,我们用typescript来调试的,so:
是否可以用tsx直接来使用?或者调试,当然是可以的。
创建rn-cli.config.js包,内容如下:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return [ 'ts', 'tsx' ]
}
};
上面代码是tsx到js的一个转换,其实就是转换成js,一般来说index.js不需要我们去改变,那么从app.js开始就可以去填写app.tsx.
yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native
相关文章
- vb语法菜鸟教程_VS VB
- Fetch vs Axios
- 蔚来高管 VS AMD,有点神志不清
- vs单步调试及断点调试基本介绍(入门版详细图文介绍)
- 线程VS进程「建议收藏」
- vscode自动错误提示_vscode和vs哪个好用
- 重识Nginx - 06 搭建静态资源Web服务器(alias VS root)
- IDEA 公司再发新神器!超越 VS Code 骚操作
- STM32高级开发——使用VS Code搭建STM32开发环境
- Web版VS Code上线:最好用的IDE终于发布网页版,然而微软发完秒删
- VS调试技巧
- Go语言框架:Beego vs Gin 的区别详解编程语言
- MySQL VS引用:比较和对比(vs引用mysql)
- VS开发环境下MySQL教程简易指南(vs使用mysql教程)
- VS一键连接MySQL,数据库管理如此便捷(vs连接mysql)
- VS如何进行远程调试Linux:详细指南(vs远程调试linux)
- VS连接SQL Server:让你从此走向数据库的新世界(vs连sqlserver)
- 数据库VS 环境搭建 MSSQL 数据库(vs 创建mssql)
- 服务【VS帮助快速开启MSSQL服务】(vs开启mssql)
- VS与SQLserver:搭建强大的开发体系(vs与sqlserver)
- VS中SQL Server的完美遇见(vs中sqlserver)
- VS与SqlServer联手构建可靠的数据库运行环境(SqlServer和vs)
- VS下使用Redis数据库体验更佳数据交互性能(vs访问redis数据库)
- VS开发环境再无Redis踪影(vs中没有redis了)
- VS操作Redis 简单而不繁琐(在vs操作redis)
- vs.Net2003无法打开或创建Web应用程序若干解决办法.
- VS.netVSS时,编译报错:未能向文件“.csproj.FileListAbsolute.txt”写入命令行对路径的访问被拒绝。