参考文档：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 false
IOS:
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 false
IOS:
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 enableProguardInReleaseBuilds
proguardFiles 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 enableProguardInReleaseBuilds
buildConfigField "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 16
targetSdkVersion 22
versionCode 1
versionName "1.0.0"
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
然后重新编译运行一下：
可以看到，我们运行后当前版本先是1.0.0,然后过了一会变成了1.0.1，也就是我们的热更新已经集成好了～～
注意：android中的versionName一定要跟codepush中的version一样，我就是这里卡了很久～～～
扫一扫
866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
