react-native代码改动夜神模拟器怎么热更新

下载好了夜神模拟器，然后react-native也在我windows系统上装好环境并且安装好脚手架了，现在在控制台输入npm start，一切都很顺利(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤

然鹅，当我command+R打开dos运行react-native run-android命令后，项目是成功在夜神模拟器上执行了，我又修改了App.js的内容，回过头来看夜神模拟器上的界面，嗯！？内容没更新？？？what?

经过几小时的琢磨，终于找到原因了，原来是因为忘记同步本机IP:端口到模拟器了，

这是我下载的版本，且看完整截图：

1、打开dos窗口输入ipconfig查看本机IP

2、点击摇一摇图标（这个等同于在真机上晃一晃，会出现调试面板，一开始下载夜神模拟器是横向的，也可以参考以下截图操作转成竖向），注意：这边点击摇一摇后，可能调试面板会出现的比较慢！！！（非常重要），实在出不来，就考虑重启模拟器！！！

3、点击摇一摇，选中Dev Settings

4、出现了以下界面（注意，这边是可以往下滚动的，鼠标左键单击让面板获得光标）

5、我们找到它，并选中它，并且输入本机IP:8081（默认端口，根据自己情况），点击确定，然后点击返回按钮，重新点击“抖一抖”图标，在弹出面板中选择 Reload，并重新加载项目运行，一切OK

6、热更新可以了之后，我们需要在PC上调试我们的代码，比如console.log(a)怎么办？

只需要点击“抖一抖”，在弹出面板中，点击 Debug Js Remotely

------------------------------------------------------------------------------------------------------------

以下部分内容来自于简书，较为完整的流程：

作者：hcwang17
链接：https://www.jianshu.com/p/4a72211831ef
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

1、安装模拟器

下载并安装夜神模拟器，安装成功后，命令行连接模拟器(前提是配置了 adb 环境变量，或者到 sdk adb 目录下运行)：

adb connect 127.0.0.1:62001

当看到 connected to 127.0.0.1:62001 时表示连接成功。

2、初始化项目并运行

通过命令行初始化项目

react-native init MyProject

进入项目根目录

cd MyProject

运行项目：

react-native run-android

这时候，运行后模拟器会红屏报错:Could not connect to development server,如下：

Error1.png

这时候需要设置模拟器调试的 ip 地址和端口号。
点击模拟器菜单键弹出设置选项，选择 dev settings:

rn2.png

接着选择 Debug server host & port device:

rn3.png

然后输入自己的 ip 地址和端口号并确定：

rn4.png

然后返回重新按设置菜单选择 Reload，并重新加载项目运行：

rn5.png

此时可以看到项目运行成功：

rn6.png

3、调式

打开app 的开发菜单，可以看到有两个选项，一个是 enable live reload
另一个是 enable hot reloading。Enable live reload 表示刷新时全局刷新而 hot reloading 是局部刷新。

rn7.png

这两个我们都选择允许后，我们改完代码并保存，可以实时看到修改效果，不用重新编译运行或者 reload。

接着我们设置通过 Chrome 调试。
在 app 设置菜单中选择 Debug JS Remotely：

rn8.png

设置完成之后，浏览器自动打开 192.168.0.21:8081/debugger-ui/ tab 页面

rn9.png

根据提示，按 Ctrl + Shif + j 可以打开开发者工具窗口：

rn10.png

可以看到，这里会报错，意思是我们不应该用此 ip 地址来调试，而应该通过 loacalhost 来进行调试。输入 http://localhost:8081/debugger-ui/ 就可以正常调试：

rn11.png

在这个控制台里，我们可以做两件事，一个是打印日志，另一个是断点调试。
首先看一下打印日志：

打印日志

在 react-native 中每个组件都有自己的生命周期，组件的生命周期对应着不同的生命阶段，通常可以分为三个阶段：组件初始化及挂载、运行阶段、卸载阶段。常见的组件生命周期函数如下：

初始化及挂载阶段：

contructor: 构造函数
componentWillMount: 组件将被加载。在 render 方法前执行。
componentDidMount: 组件已经加载到虚拟 DOM，render 方法后执行。

运行阶段：

componentWillReceiveProps(nextProps):在组件接收到其父组件传递的props的时候执行,参数为父组件传递的props。在组件的整个生命周期可以多次执行。
shouldComponentUpdate(nextProps,nextState):在componentWillReceiveProps(nextProps)执行之后立刻执行；或者在state更改之后立刻执行。
componentWillUpdate(nextProps,nextState):在shouldComponentUpdate(nextProps, nextState)函数执行完毕之后立刻调用。
componentDidUpdate(preProps,preState): render() 方法执行后立刻调用。
Render() ：渲染组件，初始化及运行都会执行。

卸载阶段：

componentWillUnmount: 组件卸载前执行。

我们可以在每个生命周期中打印日志：
测试代码如下：
App.js

/*** Sample React Native App* https://github.com/facebook/react-native** @format* @flow*/import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';const instructions = Platform.select({ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',android:'Double tap R on your keyboard to reload,\n' +'Shake or press menu button for dev menu',
});type Props = {};
export default class App extends Component<Props> {componentWillMount(){console.log("componentWillMount")}componentDidMount(){console.log("componentDidMount")}shouldComponentUpdate(){console.log("shouldComponentUpdate")}componentWillUpdate(){console.log("componentWillUpdate")}componentDidUpdate(){console.log("componentDidUpdate")}componentWillReceiveProps(){console.log("componentWillReceiveProps")}componentWillUnmount(){console.log("componentWillUnmount")}render() {console.log("render")return (<View style={styles.container}><Text style={styles.welcome}>Welcome to React Native!</Text><Text style={styles.instructions}>To get started, edit App.js</Text><Text style={styles.instructions}>{instructions}</Text></View>);}
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {fontSize: 20,textAlign: 'center',margin: 10,},instructions: {textAlign: 'center',color: '#333333',marginBottom: 5,},
});

打印日志结果如下：

log.png

断点调试

如下图所示，找到 debuggerWorker.js ，在里面找到自己想要调试的文件，打断点即可调试。

react-native代码改动夜神模拟器怎么热更新相关推荐

React Native如何与夜神模拟器连接
React Native如何与夜神模拟器连接由于开发RN时,与手机连接调试时,每次更新代码调试都需要摇一摇手机来load,这样操作起来总有不便之处,所以找到一款与其搭配模拟器是很重要的,这里我就推荐 ...
React Native带你一步步实现热更新（CodePush-Android）
前言:无奈研究了一下CodePush,遇到了很多坑-- 但是原理呢不是很难理解,就是配置有点多,原理可以简单的参考一下我之前的一篇博客React-Native 热更新尝试(Android),下面说一下 ...
win7利用pycharm代码连接夜神模拟器运行appium，被杀进程怎么办
一开始报错,appium报500,杀进程,拒绝Android连接.后面找了一下午问题点,关防火墙,卸载360,sdk配置2个环境变量,检查jdk环境变量.后来才发现,是因为夜神模拟器升级了,版本不兼容 ...
native react 折线图_【详解】纯 React Native 代码自定义折线图组件(译)
本文为 Marno 翻译,转载必须保留出处! 公众号[ Marno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 一.前言在移 ...
[React Native]使用App Center CLI发布CodePush更新--iOS简易版
面向用RN开发iOS的小伙伴,并且想使用RN的热更新功能,又不想在一大堆文档里翻来覆去的,可以看看这个简易版.觉得不错的话可以点个赞或关注.附上详细版. 主要步骤安装App Center CLI: ...
一文学会React Native（保姆级教程）持续更新
React Native 官网如果react基础有些遗忘,可以打开React官网查看介绍 React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用 ...
【react native】使用iOS模拟器运行
背景使用XCode中的模拟器来运行项目vscode中的rn代码. 方法官方文档:在iOS模拟器上运行.搭建开发环境 1.下载XCode 2.打开模拟器打开 Xcode > Preferen ...
native react 更新机制_深度使用react-native的热更新能力,必须知道的一个shell命令...
开篇之前,先讲一个自己开发中的一个小插曲: 今天周日,iOS版 App 周一提交,周三审核通过上架,很给力.不过,中午11:30的时候,运营就反应某个页面有一个很明显的问题,页面没法拉到底部,部分信息 ...
React Native集成CodePush热更新
作为一款以JavaScript语音为基础跨平台开发框架,React Native本身已经具备了动态更新的能力,不过官方却没有提供一套标准的动态更新方案.因为一个标准的动态更新方案,除了需要客户端具备动 ...
React Native初探
React Native初探转自:博客园叶小钗前言很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP ...

react-native代码改动夜神模拟器怎么热更新

react-native代码改动夜神模拟器怎么热更新相关推荐

最新文章

热门文章

react-native代码改动 夜神模拟器怎么热更新

react-native代码改动 夜神模拟器怎么热更新相关推荐

最新文章

热门文章

react-native代码改动夜神模拟器怎么热更新

react-native代码改动夜神模拟器怎么热更新相关推荐