VSCode如何搭建ReactNative环境-创新互联

这篇文章主要为大家展示了VSCode如何搭建React Native环境,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。

创新互联公司主营宁津网站建设的网络公司,主营网站建设方案,重庆APP开发,宁津h5微信小程序开发搭建,宁津网站营销推广欢迎宁津等地区企业咨询

安装 React Native Tools

在插件市场搜索 react 找到 React Native Tools 进行安装:

VSCode如何搭建React Native环境

创建的react-native的工程拖入vscode中

VSCode如何搭建React Native环境

点击F5即可运行react-native

此时可能出现 如下界面,这是因为没有配置运行文件

VSCode如何搭建React Native环境

在debug 页面,点击如下位置,添加configurations

VSCode如何搭建React Native环境

然后点击添加配置,选择debug android

VSCode如何搭建React Native环境

此时点击F5,则可出现如下界面,表示 react-native以运行起来

VSCode如何搭建React Native环境

VSCode如何搭建React Native环境

此时发现断点无法生效,且log的信息感觉特别难看,和使用chrome比起来更难用。

进行断点调试

在模拟器界面,按 Ctrl + m,打开js调试(点击 Debug JS Remotely)

VSCode如何搭建React Native环境

再看控制台,就用 console.log 的日志内容了

VSCode如何搭建React Native环境

此时进行断点也是生效的了。

VSCode如何搭建React Native环境

打开安卓模拟器

在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

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:VSCode如何搭建ReactNative环境-创新互联
网站链接:http://scyanting.com/article/cdoesd.html