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
posted @ 2020-06-03 10:17  敖毛毛  阅读(1249)  评论(0编辑  收藏  举报