react native 如何用vs code 进行调试
2023-09-14 08:59:24 时间
前言
以前做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
相关文章
- VS IDE开发字体推荐
- vue文件在vs code中没有智能提示
- [C#源码]VS各版本转换器(支持VS2012,VS2013)
- VS2010Web默认的浏览器设置和VS里调试JavaScript代码的设置
- 【资料整理】VC和VS的关系以及_MSC_VER值
- EasyDarwin开源流媒体云平台VS调试断点提示“还没有为该文档加载任何符号”的解决办法
- VS 2015main函数带参数的调试
- Netweaver工作进程的内存限制 VS CloudFoundry应用的内存限制
- Atitt php script lan debug bp 最佳实践调试php目录1.1. Error_log 11.2. Echo vs log法 11.3. 输出与debug信息昏药问题
- Atitti 过程导向 vs 结果导向 attilax的策略
- 如何提高后台服务应用问题的排查效率?日志 VS 远程调试
- VS Code 1.61 重磅发布!尽快尝试新功能!
- 解决vs项目调试时想看cout或者printf信息
- vs 编译时不断出现该文件已在源编辑器之外被修改弹窗
- VS设置DLL所在的调试目录
- ChatGPT vs Bard 背后的技术对比分析和未来发展趋势
- acdream 1431 Sum vs Product
- 一分钟明确 VS manifest 原理
- VS调试不能进入断点,提示当前不会命中断点还未为文档加载任何符号
- C语言使用技巧(二十一):VS CODE在windows下配置CMAKE编译环境【实现C/C++可同时在一个文件夹下编译】
- 一文吃透 VS Code+Git 操作(vs code中git的相关配置与使用)
- 安装visual studio code(VS Code)并修改为中文
- 【OSTEP】多道程序和时分共享 | 虚拟地址空间 | 用户栈vs内核栈 | 进程结构: struct thread | 虚拟vs物理地址空间 | 地址转换方案