使用模拟器调试react-native步骤(安卓机)
1.在cmd界面搭建react-native 环境: 可参考https://reactnative.cn/docs/0.51/getting-started.html#content
(1)npm install -g yarn react-native-cli
安装yarn命令工具和react-native命令工具,Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。
React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
(2)yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
给yarn工具设置镜像源
2.创建react-native项目
(1)react-native init AwesomeProject
AwesomeProject 是自定义的项目名,注:进入自己想要的路径上输入此命令,如下图可在app文件夹中创建项目。

(2)cd AwesomeProject
进入项目文件,在运行之前需要先连接设备。
3.安装模拟器:
(1)可以下载 夜神模拟器 或者逍遥模拟器, 也可以使用 Genymotion或者Android-studio(这两个就不介绍了)
(2)连接模拟器:
夜神模拟器 adb connect 127.0.0.1:62001
逍遥模拟器 adb connect 127.0.0.1:21503
注:当前必须只能有一个机子连着电脑,无论是模拟器还是真机!
(3)查看是否连接成功
adb devices
出现下面的东西就说明手机连接成功,此时就可以启动项目了

4.开启react-native 项目
react-native run-android
5.进入项目后会出现红屏:如图
解决方法:摇一摇手机,模拟器的右边工具栏有摇一摇功能,弹出菜单,选择Dev Settings ---> Debug server host&port for device,在弹出的对话框中输入你电脑的IP:8081,电脑的ip可以在cmd中输入ipconfig 查看, IPv4 地址 . . . . . . . . . . . . : 192.168.2.777(这个)
点击确定,之后reload!

6. 此时需要重启设备。
在手机端关闭项目进程,然后在cmd中执行 react-native run-android 重新启动一遍。 此时就大功告成了,可以在项目里面的app.js文件中编译。
7.简单补充一下真机的连接调试
(1)开启开发者模式,设置------》关于手机------》版本号(多点几次)
(2) 进入开发者选项----》开启usb 调试
(3)如果你的数据线 连着电脑 输入:adb reverse tcp:8081 tcp:8081
(4)如果没有使用数据线连接,首先要确保,你的手机要和电脑处在同一个局域网下,然后晃动手机,弹出菜单,选择Dev Settings ---> Debug server host&port for device,在弹出的对话框中输入你电脑的IP:8081,点击确定,之后reload!
(5)在真机上运行时可能会遇到白屏的情况,请在设置----》权限管理 开启悬浮窗权限
使用模拟器调试react-native步骤(安卓机)的更多相关文章
- react native iOS真机调试-联网问题与js严格模式
rn:strict mode does not allow function declarations in a lexically nested statement https://blog.csd ...
- React Native:真机断点调试+跨域资源加载出错问题解决
写在前面 闲来无事,折腾了一下React Native,相比之前,开发体验好了不少.但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解决,目测是RN新版本调试服务的bug. 遇到类似问题 ...
- 虚拟机或真机调试React Native, 开启开发者菜单
虚拟机调试呼出开发者菜单,只需按下Ctrl+M组合键即可: 对于真机,通常摇晃手机可呼出,也可以在cmd输入adb shell input keyevent 82呼出菜单.如果还是不行,可能是系统管家 ...
- 海马玩模拟器——搭建React Native环境
Visual Studio Emulator for Android 模拟器国内这网络环境不太用,所以使用海马玩模拟器,给大家推荐一下! 下面开始配置环境: 1)下载1.8+JDK,配置JDK环境参考 ...
- React Native基础&入门教程:调试React Native应用的一小步
React Native(以下简称RN)为传统前端开发者打开了一扇新的大门.其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一. 试想一下,当你在手机屏幕按下一个按钮, ...
- windows下webstorm调试react native
安装请参考:http://www.cnblogs.com/wjx0912/p/5662457.html webstorm在2016.10.20的版本才正式增加react native的调试支持,所以w ...
- 使用Visual Studio Code调试React Native报错
报错信息: [Error] Error: Unknown error: not all success patterns were matched. It means that "react ...
- React Native移动开发实战-2-如何调试React Native项目
在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...
- 使用Visual Studio Code和typescript 开发调试React Native项目
关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescrip ...
- react native android 真机调试
http://localhost:8081/index.android.bundle?platform=android 晕死,设备掉线了 C:\Users\ZHONGZHENHUA\.android\ ...
随机推荐
- 还是应该立个flag
6月份 开通博客的想法很简单,就是决定要学习C++和算法,写博客作为督促自己的一个方式,因为还没有系统的学习,自认为写博客或见解有些力所不及,决定先从自己的一篇随笔开始,因为我知道自己一旦开始,就会坚 ...
- P1481 魔族密码(LIS变形)
题目描述(题目链接:https://www.luogu.org/problem/P1481) 风之子刚走进他的考场,就…… 花花:当当当当~~偶是魅力女皇——花花!!^^(华丽出场,礼炮,鲜花) 风之 ...
- python学习笔记(三)---高级特性
一.切片 取无数多个list元素 不用一个个取得笨方法就用切片 对这种经常取指定索引范围的操作,用循环十分繁琐,因此,Python提供了切片(Slice)操作符,能大大简化这种操作. 对应上面的问题, ...
- python笔记12
day12 今日内容 函数中高级(闭包/高阶函数) 内置函数 内置模块(.py文件) 内容回顾 函数基础概念 函数基本结构 def func(arg): return arg; v1 = func(1 ...
- 嵊州普及Day4T2
题意:有一个单行走廊,每回合第ai个展柜会冒出来一只鬼,右边尽头有一个人间大炮和向最左传送门(费用均1金币),你需要每回合将所有鬼交换展柜,全部至最右,问若从一到n所有回合结束是需多少金币可射死所有鬼 ...
- 工作中一些常用的linux命令
问题一: 绝对路径用什么符号表示?当前目录.上层目录用什么表示?主目录用什么表示? 切换目录用什么命令? 答案:绝对路径:如/etc/init.d当前目录和上层目录:./ ../主目录:~/切换目录 ...
- 命令打开java控制面板
运行一些java程序时,会提示java安全阻止,需要手动运行,java7一起更改安全级别为“中”就可以了,java8需要配置信任网站 . 这些操作都需要在java控制面板进行,经常会出现无法在控制面板 ...
- 吴裕雄--天生自然JAVA面向对象高级编程学习笔记:匿名内部类
interface A{ public void printInfo() ; // } class B implements A{ // 实现接口 public void printInfo(){ S ...
- 微信7.0以后更新后H5页面定位不准确
在有定位的页面,微信更新完7.0以后定位也不提醒说是否同意定位 然后定位都跑到几百公里以外的地方了,然后怎么百度都不知道是啥问题,后面问了前端说微信更了7.0以后好像HTTP的就不支持了,然后我就去百 ...
- 计算机网络中OSI参考模型
OSI参考模型 应用层 包括所有能产生网络流量的程序 DNS属于这一层 表示层 用来判断传输之前是否进行加密或压缩处理(二进制.ASCII) 比如出现乱码情况,可能就是表示层的问题 会话层 一个浏览器 ...