安装 React Native Tools
在插件市场搜索 react 找到 React Native Tools 进行安装:
创建的react-native的工程拖入vscode中
点击F5即可运行react-native
此时可能出现 如下界面,这是因为没有配置运行文件
在debug 页面,点击如下位置,添加configurations
然后点击添加配置,选择debug android
此时点击F5,则可出现如下界面,表示 react-native以运行起来
此时发现断点无法生效,且log的信息感觉特别难看,和使用chrome比起来更难用。
进行断点调试
在模拟器界面,按 Ctrl + m,打开js调试(点击 Debug JS Remotely)
再看控制台,就用 console.log 的日志内容了
此时进行断点也是生效的了。
打开安卓模拟器
在as里创建安卓模拟器过程就不说了,使用as打开模拟器无疑是最简单的方式,但是vs + as + 模拟器,电脑受不了啊,所以这里有两种不开as打开模拟器的方式:
- 在Android\SDK\emulator新建一个bat文件,内容如下,Nexus_5X_API_28 是模拟器的名字(在avd目录可查看名字),然后运行此bat文件就 ok啦。
emulator.exe -netdelay none -netspeed full -avd Nexus_5X_API_28
- 如果安装过flutter的环境,且vs也进行了相关配置,可以直接使用vs打开模拟器,进入flutter的工程中,点击右下角的 No Devices 选择想要打开的模拟器即可:
使用bat打开模拟器的方式有时会使react-native的找不到设备,此时是用as打开或使用flutter的方式打开就没这个问题了,在或者清除下模拟器的数据。