codePush热更新

参考文档：https://blog.csdn.net/vv_bug/article/details/78105269
https://www.cnblogs.com/guangqiang/p/9589410.html
本事例用的react native版本为"react-native": “0.58.6”, codepush版本为"react-native-code-push": “^5.5.2”，平台为Mac，本事例为Android热更新。Android studio版本为3.3.1
第一步：创建一个react-native项目,打开终端，输入react-native init <项目名称>，我的项目名称为firstReact，然后用Android studio打开android项目，如图
打开之后会弹一个提示：如图：
我们点击红色区域，之后会有一个错误，如图
意思是当前的28.0.2版本的sdk不被支持，要改为28.0.3的版本。然后打开project的build.gradle文件，找到buildscript，修改里面的buildToolsVersion为"28.0.3"。路径为./firstReact/android/build.gradle, 修改后如图
当我们运行程序时报如下的错误，如图
解决方法：在android\app\src\main这个目录里面新建一个文件夹assets，然后在项目根目录下运行：
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res指令，运行后会在assets里面生成一个index.android.bundle文件
该命令的使用方式与说明：

Android:
react-native bundle --entry-file index.js --bundle-output ./bundle/android/index.android.bundle --platform android --assets-dest ./bundle/android --dev falseIOS:
react-native bundle --entry-file index.js --bundle-output ./bundle/ios/index.ios.jsbundle --platform ios --assets-dest ./bundle/ios --dev false

（1）–entry 入口js文件，android系统就是index.android.js，ios系统就是index.ios.js
（2）–bundle-output 生成的bundle文件路径
（3）–platform 平台
（4）–assets-dest 图片资源的输出目录
（5）–dev 是否为开发版本，打正式版的安装包时我们将其赋值为false

此处有一点需要说明：如果你的react-native版本不是最新的版本，你的项目根目录下会有index.android.js 和 index.ios.js两个文件，而没有index.js文件，这时你需要用的命令为一下方式

Android:
react-native bundle --entry-file index.android.js --bundle-output ./bundle/android/index.android.bundle --platform android --assets-dest ./bundle/android --dev falseIOS:
react-native bundle --entry-file index.ios.js --bundle-output ./bundle/ios/index.ios.jsbundle --platform ios --assets-dest ./bundle/ios --dev false

当把这个react-native打包relesea 的时候会报以下等错误

error: resource android:attr/dialogCornerRadius not found.
error: resource android:attr/dialogCornerRadius not found.
error: resource android:attr/fontVariationSettings not found.
error: resource android:attr/ttcIndex not found.

方法1：(该方法没作用)
“com.android.support:appcompat-v7:+”
改成固定版本
“com.android.support:appcompat-v7:27.1.1”

方法2：
在build.gradle(module:app)中添加

configurations.all {resolutionStrategy {force "com.android.support:appcompat-v7:27.1.1"force "com.android.support:support-v4:27.1.1"}
}

方法3:
build.grade中dependencies下引用的各种依赖
一定要挨个检查版本是否含有+，开始以为只需要修改support版本为28以前的就可以了发现不管怎么强制应用版本都还是出错，本以为三方依赖没关系的，年轻啊~ 把所有版本都固定后问题解决~。

implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
implementation 'com.facebook.react:react-native:+'

把这些东西改为固定版本就好了

以下开始codepush热更新功能：
接入流程

安装 CodePush CLI
注册 CodePush账号
在CodePush服务器注册App
RN代码中集成CodePush
原生应用中配置CodePush
发布更新的版本
CodePush 接入示例Demo地址：https://github.com/guangqiang-liu/CodePushDemo
1、安装 CodePush CLI
安装CodePush指令，直接在终端上输入如下命令即可，注意：这个CodePush指令只需要全局安装一次即可，如果第一次安装成功了，那后面就不在需要安装
安装指令：$ npm install -g code-push-cli
2、注册 CodePush账号
注册CodePush账号也很简单，同样是只需简单的执行下面的命令，同样这个注册操作也是全局只需要注册一次即可
当注册成功后，CodePush会给我们一个key
我们直接复制这个key，然后在终端中将这个key填写进去即可，填写key登录成功显示效果如下
我们使用下面的命令来验证我的登录是否成功
$ code-push login
CodePush注册登录相关命令：
- code-push login 登陆
- code-push loout 注销
- code-push access-key ls 列出登陆的token
- code-push access-key rm 删除某个 access-key
  在CodePush服务器注册App
  为了让CodePush服务器有我们的App，我们需要CodePush注册App，输入下面命令即可完成注册，这里需要注意如果我们的应用分为iOS和Android两个平台。
  切换到项目的根目录下。
  向codepush里添加iOS平台应用：code-push app add <项目名称> ios react-native
  向codepush里添加ANDROID平台应用：code-push app add <项目名称> Android react-native,如图：
  我们可以输入如下命令来查看我们刚刚添加的App
  $ code-push app list
  CodePush管理App的相关命令：
  - code-push app add 在账号里面添加一个新的app
  - code-push app remove 或者 rm 在账号里移除一个app
  - code-push app rename 重命名一个存在app
  - code-push app list 或则 ls 列出账号下面的所有app
  - code-push app transfer 把app的所有权转移到另外一个账号

RN代码中集成CodePush
首先我们需要安装CodeoPush组件，然后通过link命令添加原生依赖，最后在RN根组件中添加热更新逻辑代码
进入项目的根目录，然后执行npm install --save react-native-code-push,然后在根目录下的node_moudules目录下看有没有react-native-code-push目录，如果有说明组件安装成功。

这里有一个提示，让我们运行npm audit fix,如果你们的没有则不需要这一步，如果有这个提示不运行会触发后面的错误，稍后展示。运行后如下图：

这个其实还有问题，不要管他。

然后进入根目录下的android目录,然后执行npm i -g rnpm, Mac 要用sudo npm i -g rnpm指令。(该命令是安装rnpm)；运行后如下图：

在之后回到项目的根目录，执行rnpm link react-native-code-push(该命令是配置codepush环境)；运行后如下图：
后面一路会车；
之后用AndroidStudio 打开android项目，找到./<“项目根目录”>/android/app/build.gradle,你会发现多几行代码：
如下图：

要把compile改为implementation，不然会报错。

然后在./<“项目根目录”>/android/settings.gradle这个文件也多了几行代码：如图

上面这些都是脚本文件为我们自动生成的。
点击”Sync Now ，然后我们试着运行app，你会发现报了一个不明的错误,如图：

这时因为./firstReact/android/app/src/main/java/com/firstReact/MainApplication.java文件里面缺少依赖项。添加如图代码：
这时我们需要设置codepush_key值。
你会看到CODEPUSH_KEY变红色了，那么这个变量我们怎么配置呢？
我们找到./<“项目根目录”>/android/app/build.gradle文件，找到buildtypes,然后把里面替换为

buildTypes {release {minifyEnabled enableProguardInReleaseBuildsproguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"buildConfigField "String", "CODEPUSH_KEY", '"Ce2Lap6BN2ZqSrf6GyQ4U2AZlvpc55514efb-34f8-4da9-8ce5-b8c65a00e283"' //Production}debug {buildConfigField "String", "CODEPUSH_KEY", '"3RCKlOnnPmFdxolA0_BKzwH85IkL55514efb-34f8-4da9-8ce5-b8c65a00e283"' //Staging}releaseStaging {minifyEnabled enableProguardInReleaseBuildsbuildConfigField "String", "CODEPUSH_KEY", '"3RCKlOnnPmFdxolA0_BKzwH85IkL55514efb-34f8-4da9-8ce5-b8c65a00e283"' //Staging
}

}
里面的CODEPUSH_KEY即为我们之前获取的Deployment Key ，
release对应的Production
releaseStaging跟debug对应的Staging
然后重新编译一下as，会发现原来的地方不报红了，即：new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG)不报红。
自此，Android配置基本完成。

配置React Native环境
我们什么时候更新我们的app呢？我们为了简单一点就直接在rn的第一个页面中作更新了，我们直接在我们的index.android.js文件的componentDidMount方法：

  componentDidMount() {AppState.addEventListener("change", (newState) => {newState === "active" && CodePush.sync();});}

全部内容：

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, {Component} from 'react';
import {AppRegistry,StyleSheet,Text,View,AppState,
} from 'react-native';
import CodePush from 'react-native-code-push';const VERSION = '1.0.0';
export default class App extends Component {render() {return (<View style={styles.container}><Text>{'当前版本：' + VERSION}</Text><Text style={styles.welcome}>Welcome to React Native!</Text><Text style={styles.instructions}>To get started, edit index.android.js</Text><Text style={styles.instructions}>Double tap R on your keyboard to reload,{'\n'}Shake or press menu button for dev menu</Text></View>);}componentDidMount() {AppState.addEventListener("change", (newState) => {newState === "active" && CodePush.sync();});}
}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,},
});AppRegistry.registerComponent('App', () => App);

然后我们打个生产包运行一下，我们直接在根目录执行：

React-native bundle --entry-file index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --assets-dest ./android/app/src/main/res/ --dev false

然后到我们android studio中把 buildtype改为release：

切换为release模式是会报如下错误，如图：

这个错误是因为我们没安装"node-pre-gyp"依赖项执行：sudo npm install node-pre-gyp指令 , 这时终端会提示found 11 low severity vulnerabilities
run npm audit fix to fix them, or npm audit for details，我们接着运行npm audit fix就好了。如下图：

然后直接运行我们的app：

可以看到，我们的app出现了，我们加了一个版本控制为：1.0.0,

然后我们怎么发布我们的jsbundle让它热更新呢？
六、发布jsbundle到codepush

比如我们现在要升级了，我们模拟一下，把rn页面的当前版本1.0.0的提示改为1.0.1:

const VERSION = '1.0.1';
export default class App extends Component {render() {return (<View style={styles.container}><Text>{'当前版本：' + VERSION}</Text>

然后我们在项目根目录创建一个bundles文件夹，然后打一个jsbundle包到bundles文件夹中：执行命令

react-native bundle --platform android --entry-file index.js --bundle-output ./bundles/index.android.bundle --dev false

index.android.bundle即为我们需要上传到codepush的文件～～

最后到codepush

code-push release firstReact ./bundles/index.android.bundle 1.0.0 --deploymentName Production  --description "更改版本为1.0.1" --mandatory true

然后查看一下我们的发布情况：

好啦～～～我们改变一下我们android中的版本为1.0.0,因为要跟我们codepush上的版本对应起来，所以我们找到andoid的/xxx/UpdateDemo/android/app/build.gradle文件，然后把版本号改为：1.0.0：

 defaultConfig {applicationId "com.updatedemo"minSdkVersion 16targetSdkVersion 22versionCode 1versionName "1.0.0"ndk {abiFilters "armeabi-v7a", "x86"}}

然后重新编译运行一下：
可以看到，我们运行后当前版本先是1.0.0,然后过了一会变成了1.0.1，也就是我们的热更新已经集成好了～～

注意：android中的versionName一定要跟codepush中的version一样，我就是这里卡了很久～～～

codePush热更新相关推荐

CodePush热更新组件详细接入教程
CodePush热更新组件详细接入教程什么是CodePush CodePush是一个微软开发的云服务器.通过它,开发者可以直接在用户的设备上部署手机应用更新.CodePush相当于一个中心仓库,开发 ...
ReactNative系列之十八codepush热更新
目前仅针对Android,iOS后续再补 1.简介 codepush是微软的一套热升级解决实现,还有一种是reactnatie中文网上的react-native-pushy.这两种方案我都试了下,推荐 ...
React Native集成CodePush热更新
作为一款以JavaScript语音为基础跨平台开发框架,React Native本身已经具备了动态更新的能力,不过官方却没有提供一套标准的动态更新方案.因为一个标准的动态更新方案,除了需要客户端具备动 ...
cordova+codepush 热更新实践 (微软 cordova-plugin-code-push)
系统环境 windows 10 所需工具 node.js, android studio, 安装方法自行百度/谷歌 cordova-hot-code-push 不再维护, 转而使用 cordova-p ...
CodePush 热更新之自定义更新弹框及下载进度
code-push的提示面板可能不符合产品设计的要求,这时就需要我们去自定义一个更新提示框.下面是一个简单的例子: 1. 检查是否需要更新首先判断是否需要更新,如果有新版本,显示更新面板,根据用户行 ...
RN：CodePush热更新
什么是CodePush CodePush是一个微软开发的云服务器.通过它,开发者可以直接在用户的设备上部署手机应用更新.CodePush相当于一个中心仓库,开发者可以推送当前的更新(包括JS/HTML ...
CodePush热更新常用命令与注意事项
欢迎大家关注[跨平台开发那些事]公众号,定期推送跨平台开发技术实践. 总结了一些在CodePush中比较常用的命令以及注意事项,供大家参考. 一.更新流程图片来源:http://www.jiansh ...
ReactNative 告别CodePush，自建热更新版本升级环境
微软的CodePush热更新非常难用大家都知道,速度跟被墙了没什么区别. 另外一方面,我们不希望把代码放到别人的服务器.自己写接口更新总归感觉安全一点. so,就来自己搞个React-Native A ...
react-native热更新之code-push
文章部分内容参考:https://blog.csdn.net/qq_33323251/article/details/79437932 但是我在这个基础上进行了补充 code-push已经迁移到 AP ...

codePush热更新

codePush热更新相关推荐

最新文章

热门文章