目前是webstorm调试,Vscode搞了俩天没成功,(建议用webstorm,使用和AndroidStudio 类似,快捷键也类似)
准备
导入项目
导入项目后,如果首次导入,那么和AndroidStudio一样,无法自动将项目起来。(ps:我跑的是Android项目),这个地方有 android
的标志是因为我已经配置好了。
如果显示
Add Configurations
,需要去配置你的ReactNative项目,在package.json
文件中,在scripts
标签下添加设置启动的命令行工具。最后的
--flavor=Flavors_testDebug
根据Android项目中的配置,看你启动哪个渠道的生产还是测试环境的包,如果没有设置渠道,
--flavor=Flavors_testDebug
可以去掉。如果命令行启动配置好了,就可以启动项目,不过是以Android的启动的。
*点击右边的绿色箭头
启动完成之后,如果ReactNative项目无语法错误,那么你将在手机或者模拟器中跑起来。并且在图中红框中自动添加一个Android的启动项目,下次可以直接点击旁边的按钮就可以了。
React Native的调试过程
同样是点击Add Configurations
标记
在点击左上角的“+”按钮,选择
React Native
符号生成一个
Configurations
页面- name 为启动命名
- React Native Package:选择你自己本地的 RectNative命令行工具
点击OK即可保存配置,现在的项目是以React Native 运行点击后面的绿色昆虫
项目将以Debug的形式跑起来,在需要断点位置打上断点。
如果页面错过断点,手机中如果不是断点模式,改为断点模式,重新Reload
下项目即可运行起来。