VSCode搭建ReactNative环境安装 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啦。
< -netdelay none -netspeed full -avd Nexus_5X_API_28
如果安装过flutter的环境,且vs也进⾏了相关配置,可以直接使⽤vs打开模拟器,进⼊flutter的⼯程中,点击右下⾓的 No Devices 选择想要打开的模拟器即可:
使⽤bat打开模拟器的⽅式有时会使react-native的不到设备,此时是⽤as打开或使⽤flutter的⽅式打开就没这个问题了,在或者清除下模拟器的数据。
记录⼀些奇葩的错误
出现如下错误:
⽆法进⾏调试。执⾏命令 d run-android --no-packager 时出错: 执⾏命令 d run-android --no-packager 时出错 (error code 101)
可能原因:
1. 查不到模拟器了,我试了下重启模拟器就没问题了。
2. 查看模拟器是否开启了USB调试,或即使开启了,再关了,开⼀次(位置:Settings => System =>
Developer options(为打开开发者模式的话,得先进⼊About emulated device 狂点⾥⾯的 Build number))
adb 连接出现 emulator-5554 unauthorized 此时可以尝试:
输⼊ adb kill-server ,然后在查就会发现设备处于连接状态了。
删除.android⽬录下 adbkey adbkey.pub 然后重启模拟器。
打开设置,选择 System -> Reset options 点击⾥⾯的 Reset app preferences。
reactnative开发实在不⾏的话,打开 android studio 清除模拟器数据 wipe data。
出现如下错误:(出现了多处错误,如路径错误,重新运⾏,就可以看到具体的错误)
到此这篇关于VSCode搭建React Native环境的⽂章就介绍到这了,更多相关VSCode搭建React Nativ
e内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论