VSCode搭建React Native环境


Posted in Javascript onMay 07, 2020

安装 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

VSCode搭建React Native环境

如果安装过flutter的环境,且vs也进行了相关配置,可以直接使用vs打开模拟器,进入flutter的工程中,点击右下角的 No Devices 选择想要打开的模拟器即可:

VSCode搭建React Native环境

VSCode搭建React Native环境

使用bat打开模拟器的方式有时会使react-native的找不到设备,此时是用as打开或使用flutter的方式打开就没这个问题了,在或者清除下模拟器的数据。

记录一些奇葩的错误

出现如下错误:

无法进行调试。执行命令 react-native.cmd run-android --no-packager 时出错: 执行命令 react-native.cmd 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。
  • 实在不行的话,打开 android studio 清除模拟器数据 wipe data。

VSCode搭建React Native环境

出现如下错误:(出现了多处错误,如路径错误,重新运行,就可以看到具体的错误)

Error: {"type":"InternalError","errors":[],"message":"Metro Bundler has encountered an internal error, please check your terminal error output for more details"}。调试将不起作用: 请尝试从应用内重新加载 JS,或重新连接 VS Code 调试器: 无法在 <http://localhost:8081/index.bundle?platform=android&dev=true&minify=false> 处导入脚本 (error code 1408)

到此这篇关于VSCode搭建React Native环境的文章就介绍到这了,更多相关VSCode搭建React Native内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
javascript 函数使用说明
Apr 07 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
js初始化验证实例详解
Nov 26 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
angularjs实现猜大小功能
Oct 23 Javascript
Javascript查看大图功能代码实现
May 07 #Javascript
用VsCode编辑TypeScript的实现方法
May 07 #Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 #Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 #Javascript
Javascript幻灯片播放功能实现过程解析
May 07 #Javascript
基于javascript实现日历功能原理及代码实例
May 07 #Javascript
Vue简单实现原理详解
May 07 #Javascript
You might like
PHP代码优化的53个细节
2014/03/03 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
javascript json2 使用方法
2010/03/16 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
python与pycharm有何区别
2020/07/01 Python
static函数与普通函数有什么区别
2015/12/25 面试题
经典c++面试题六
2012/01/18 面试题
Linux文件操作命令都有哪些
2016/07/23 面试题
大学生求职推荐信
2013/11/27 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
卫生院义诊活动总结
2015/05/07 职场文书