react native 如何用vs code 进行调试
前言
以前做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