用CodePush在React Native App中做热更新
最近在学React Native,学到了CodePush热更新。
老师讲了两种实现的方法,现将其记录一下。
相比较原生开发,使用React Native开发App不仅能节约开发成本,还能做原生开发不能实现的热更新功能。
使用原生技术开发App时,每次代码做了改动后,都需要提交到应用商店进行审核,审核通过后,需要等用户重新下载安装后才会生效。而如果使用React Native开发App,开发者可随时发布新版本,不用经过应用商店的审核,用户即可使用到新版本,并且还可做到不用经过用户的同意就强制安装新版本。
CodePush是微软的技术,因为服务器在国外,所以不太稳定。如果开发的App是针对国内市场的,应该使用CodePush中国。
要使用CodePush,需安装cpcn-react-native依赖包。可使用官方提供的工具cpcn-client来安装依赖包。cpcn-client的下载地址是:http://code-push.cn/docs/1010.htm 。
代码实现比较简单。第一种方法是直接改变App.js组件:
import cpcn from 'cpcn-react-native';
class App extends Component {
}
App = cpcn(App);
export default App;
这种方法在有新版本更新时,会使用默认的提示框,提示框中的文字也是默认的。灵活性不够。
第二种方法比较灵活,可以自定义对话框和进度条。这种方法使用 cpcn.check() 方法。
import cpcn from "cpcn-react-native";
class App extends Component {
componentDidMount(){
cpcn.check({
checkCallback: (remotePackage, agreeContinueFun) => {
if(remotePackage){
}
},
downloadProgressCallback: (downloadProgress) => {
},
installedCallback: (restartFun) => {
}
});
}
}
export default App;
将 cpcn.check() 方法写在 App.js 的 componentDidMount 方法内,当 App 组件加载后调用此依法。
cpcn.check() 方法的参数:
checkCallback: 在检查是否有可更新的版本后调用这个方法,如果 remotePackage 不是 null,表示有可更新的版本。如果要继续更新,就调用 agreeContinueFun(true),如果不想继续更新,就调用 agreeContinueFun(false)。
downloadProgressCallback: 在下载新版本的过程中调用这个方法。可用它的参数 downloadProgress 做进度条。downloadProgress.receivedBytes 是已经下载的字节数,downloadProgress.totalBytes 是总字节数。
installedCallback: 当新版本安装完成后调用这个方法。需调用 restartFun(true) 重启App,重启后新版本就生效了。
用CodePush在React Native App中做热更新的更多相关文章
- React Native App设置&Android版发布
React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...
- [译] Facebook:我们是如何构建第一个跨平台的 React Native APP
英文原文(需FQ):https://code.facebook.com/posts/1189117404435352/ 早些时候,我们介绍过iOS版的React Native. React Nativ ...
- React Native APP结构探索
APP结构探索 我在Github上找到了一个有登陆界面,能从网上获取新闻信息的开源APP,想来研究一下APP的结构. 附上原网址:我的第一个React Native App 具体来讲,就是研究一个复杂 ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
- React Native & app demos
React Native & app demos https://github.com/ReactNativeNews/React-Native-Apps https://github.com ...
- React Native工程中TSLint静态检查工具的探索之路
建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...
- React Native开发中自动打包脚本
React Native开发中自动打包脚本 在日常的RN开发中,我们避免不了需要将我们编写的代码编译成安装包,然后生成二维码,供需要测试的人员扫描下载.但是对于非原生的开发人员来说,可能不知如何使用X ...
- 在React Native中集成热更新
最近,在项目DYTT集成了热更新,简单来说,就是不用重新下载安装包即可达到更新应用的目的,也不算教程吧,这里记录一下. 1.热更新方案 目前网上大概有两个比较广泛的方式,分别是 react-nativ ...
- 我的第一个React Native App
我用了三天时间实现了一个相对比较完整的React Native 新闻发布类型的示例.应用做得很简单,但大多React Native的组件都有用到,今天做一个分享(由于我电脑是Windows系统,所以只 ...
随机推荐
- LogViewer解君之忧
LogViewer是一款查看和搜索大型文本文件的工具,能够很快速的查看记事本无法打开的大容量文件,比如大数据的日志文件或数据库文件等,可支持最大4GB的大容量. 一.下载地址链接(中文破解版): ht ...
- 针对工程实践项目的用例建模Use Case Modeling
一.什么是用例建模(Use Case Modeling) 1.用例(Use Case) (1)概念:用例是软件工程或系统工程中对系统如何反应外界请求的描述,是一种通过用户的使用场景来获取需求的技术. ...
- mui iOS云打包修改权限提示语
打包提交appstore如果用到了如下权限需要修改提示语,详细描述使用这个权限的原因,如不修改提示语appstore审核可能会被拒绝 设置方法如下: 使用视图方式打开manifest.json文件, ...
- 20191106-使用pyttsx对文本进行语音输出
实现pyttsx文字转语音的开源库调用 参考: 1. https://blog.csdn.net/liuyubo23/article/details/83990532 2. https://www ...
- CentOS 7下MySQL 5.7安装
5.7和之前版本的MySQL有一些不同,现把CentOS 7下MySQL 5.7安装.配置与应用完整过程记下来,或许对新手来说有用. 本文描述的安装是采用通用的二进制压缩包(linux – Gener ...
- 实测Maven上传jar包到私服的方法归纳
Hello,各位小伙伴大家好,我是小栈君.好久不见,最近因为工作的缘故,导致了更新变慢,但是小栈君也在积极的做素材的规划,毕竟学习知识点的归纳和提炼需要一定的时间. 所以还请大家多多见谅,下一期的分享 ...
- 股票交易——单调队列优化DP
题目描述 思路 蒟蒻还是太弱了,,就想到半个方程就GG了,至于什么单调队列就更想不到了. $f[i][j]$表示第$i天有j$张股票的最大收益. 那么有四种选择: 不买股票:$f[i][j]=max( ...
- 你了解MySQL中的锁吗?
MySQL中的锁,分为全局锁.表级锁.行锁 全局锁 全局锁的意思就是,对整个数据库实例加锁,它的命令是FTWRL Flash tables with read lock 这个命令的语义是,使整个库处于 ...
- VueRouter爬坑第一篇-简单实践
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- 对学习Python自然语言处理的一点儿感悟
研究生阶段,如果一开始找不到知识点,那就结合导师的研究课题以及这个课题设计到的知识领域,扎好基础知识能力.以我研究的自然语言处理领域为例,如果一开始不知道研究点,且又要安排学习计划,那么我会在选择: ...