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 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
js 窗口抖动示例
2013/09/04 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python如何实现反向迭代
2018/03/20 Python
python实现经典排序算法的示例代码
2021/02/07 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
Solaris操作系统的线程机制
2015/07/28 面试题
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
挂科检讨书范文
2014/02/20 职场文书
党员大会主持词
2014/04/02 职场文书
施工单位安全责任书
2014/07/24 职场文书
招标承诺书
2014/08/30 职场文书
保研推荐信格式
2015/03/25 职场文书
结婚通知短信大全
2015/04/17 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis