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步骤(安卓机)的更多相关文章

  1. react native iOS真机调试-联网问题与js严格模式

    rn:strict mode does not allow function declarations in a lexically nested statement https://blog.csd ...

  2. React Native:真机断点调试+跨域资源加载出错问题解决

    写在前面 闲来无事,折腾了一下React Native,相比之前,开发体验好了不少.但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解决,目测是RN新版本调试服务的bug. 遇到类似问题 ...

  3. 虚拟机或真机调试React Native, 开启开发者菜单

    虚拟机调试呼出开发者菜单,只需按下Ctrl+M组合键即可: 对于真机,通常摇晃手机可呼出,也可以在cmd输入adb shell input keyevent 82呼出菜单.如果还是不行,可能是系统管家 ...

  4. 海马玩模拟器——搭建React Native环境

    Visual Studio Emulator for Android 模拟器国内这网络环境不太用,所以使用海马玩模拟器,给大家推荐一下! 下面开始配置环境: 1)下载1.8+JDK,配置JDK环境参考 ...

  5. React Native基础&入门教程:调试React Native应用的一小步

    React Native(以下简称RN)为传统前端开发者打开了一扇新的大门.其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一. 试想一下,当你在手机屏幕按下一个按钮, ...

  6. windows下webstorm调试react native

    安装请参考:http://www.cnblogs.com/wjx0912/p/5662457.html webstorm在2016.10.20的版本才正式增加react native的调试支持,所以w ...

  7. 使用Visual Studio Code调试React Native报错

    报错信息: [Error] Error: Unknown error: not all success patterns were matched. It means that "react ...

  8. React Native移动开发实战-2-如何调试React Native项目

    在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...

  9. 使用Visual Studio Code和typescript 开发调试React Native项目

    关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescrip ...

  10. react native android 真机调试

    http://localhost:8081/index.android.bundle?platform=android 晕死,设备掉线了 C:\Users\ZHONGZHENHUA\.android\ ...

随机推荐

  1. C语言数组成绩排序

    #include<stdio.h> #define N 10 int main() { int s,i,j,tmp; int a[10]={78,56,38,99,81,86,39,100 ...

  2. 1.Neo4j简介(Neo4j系列)

    简介 Neo4j是一个高性能.高可靠性.可扩展.支持ACID事务的图数据库,它基本由Java语言实现,支持数据平台的平滑扩展和过渡,同时能够在多种系统上完成部署,它使用Cypher查询语言对数据进行增 ...

  3. 通用dao的demo

          代码片段 1. [代码]整型映射工具 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 package org.dave.common.databas ...

  4. java校招一些面试的题目

    数组和链表的区别 数组静态分配内存,链表动态分配内存: 数组在内存中连续,链表不一定连续: 数组元素在栈区,链表元素在堆区: 数组利用下标定位,时间复杂度为O(1),链表定位元素时间复杂度O(n) 数 ...

  5. NPM概述及使用简介

    什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP. npm是Node官方提供的包管理工具,他已经成了Node包的标准发布平台,用于Node ...

  6. NO22 Linux正则表达式--grep命令常用参数

    Linux正则表达式:  一.基础正则第一波字符说明: 示例: 二.基础正则第二波字符说明:  三.基础正则第二波字符说明: 示例:  grep:一般常用参数 示例:+和*  ?和.:  |:  () ...

  7. uni-app小程序滑动事件

    <view class="relative" @touchmove="handletouchmove" @touchstart="handlet ...

  8. chart 模板【转】

    Helm 通过模板创建 Kubernetes 能够理解的 YAML 格式的资源配置文件,我们将通过例子来学习如何使用模板. 以 templates/secrets.yaml 为例: 从结构看,文件的内 ...

  9. Java笔记--网络编程

    1.IP地址:InetAddress类 --唯一的标识Internet上的计算机 --本地回环地址(hostAddress)127.0.0.1 主机名(hostName):localhost //根据 ...

  10. css的响应式布局和动画

    把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...