Code Push 集成步骤
安装code-push-cli脚手架,注意要使用2.1.9的版本否则登录失败
npm install -g code-push-cli@2.1.9
登录code-push-server,先使用
npx code-push whoami
查看是否已登录,如果出现[Error],表示未登录
npx code-push login http://<IP>:3000
在网页中获取token并复制到命令行进行登录,默认账号:admin 密码:123456
获取token
复制token登录
查看已注册的项目
npx code-push app list
如果是新项目则先添加,同一个RN项目IOS和Android需要各添加一个
npx code-push app add <app name> <platform> react-native
命名规范:XXX-Android 或 XXX-IOS, 示例:
npx code-push app add FirstRNProject-Android android react-native
npx code-push app add FirstRNProject-IOS ios react-native
查看app key
npx code-push deployment list <appname> -k
Production:正式,Staging:预发布,示例:
Android 端接入
在RN项目根目录安装react-native-code-push
npm install --save react-native-code-push
接入react-native-code-push组件。在RNProject/android/settings.gradle 文件末尾添加:
include ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
在RNProject/android/app/build.gradle中添加:
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
部署key的环境需要与以下部署命令的一致,RNProject中,默认debug版使用Staging,release版使用Production)。
更推荐的做法,是不使用strings.xml定义,而将key使用gradle配置
android {
...
buildTypes {
debug {
...
// CodePush更新不应在开发时使用,因为codepush会覆盖rn开发包。但是CodePush sdk会在所有模式下都去检查更新,因此需要提供key。XXProject中,直接使用Staging环境的key
resValue "string", "CodePushDeploymentKey", '"yTA5ETSdmcqHBLEBRdP2lfYf0Qdh4ksvOXqog"'
...
}
releaseStaging {
...
// 预发布环境Staging的key,XXProject由于历史原因,直接使用了debug
resValue "string", "CodePushDeploymentKey", '"yTA5ETSdmcqHBLEBRdP2lfYf0Qdh4ksvOXqog"'
// matchingFallbacks表示找不到的依赖使用release类似配置
matchingFallbacks = ['release']
...
}
release {
...
// 正式环境Production的key
resValue "string", "CodePushDeploymentKey", '"x4Erpbv7suZKbPUAbGdZThWd5TVO4ksvOXqog"'
...
}
}
...
}
将所需CodePushServerUrl放到/android/app/src/main/res/values/strings.xml
<resources>
...
<string moduleConfig="true" name="CodePushServerUrl">http://192.168.1.6:3000/</string>
...
</resources>
在MainApplication添加
注意: RN 0.6+版本使用的Auto link引入的CodePush没有提供修改CodePushServerUrl的API,所以在getPackages()方法中需要先移除Auto link CodePush包,然后手动添加
1. // 引入CodePush包
import com.microsoft.codepush.react.CodePush;
...
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
2. // 重写getJSBundleFile方法
@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// 3. 先移除auto link的code push包,再手动添加
for (ReactPackage rp : packages) {
if (rp instanceof CodePush) {
packages.remove(rp);
break;
}
}
packages.add(new CodePush(getResources().getString(R.string.CodePushDeploymentKey)
, getApplicationContext(), BuildConfig.DEBUG, getResources().getString(R.string.CodePushServerUrl)));
return packages;
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
...
React Native 接入
接入Android与IOS原生SDK后,需要配置react native以确定codepush更新检查与安装时机
主模块添加
//设置检查更新的频率
//ON_APP_RESUME APP恢复到前台的时候
//ON_APP_START APP开启的时候
//MANUAL 手动检查
let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL }
App = codePush(codePushOptions)(App)
React Native 打包
Android 和 IOS 分开打包
Android端打包
构建 JS Bundle
在android工程中创建assets/index.android.bundle文件,已存在则忽略
在RN根目录输入打bundle包命令,示例:
npx react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle
- 命令介绍
react-native bundle [参数]
构建 js 离线包
Options:
-h, --help 输出如何使用的信息
--entry-file <path> RN入口文件的路径, 绝对路径或相对路径
--platform [string] ios 或 andorid
--transformer [string] Specify a custom transformer to be used
--dev [boolean] 如果为false, 警告会不显示并且打出的包的大小会变小
--prepack 当通过时, 打包输出将使用Prepack格式化
--bridge-config [string] 使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
--bundle-output <string> 打包后的文件输出目录, 例: ./android/app/src/main/assets/index.android.bundle
--bundle-encoding [string] 打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.
--sourcemap-output [string] 生成Source Map,但0.14之后不再自动生成source map,需要手动指定这个参数。例: /tmp/groups.map
--assets-dest [string] 打包时图片资源的存储路径
--verbose 显示打包过程
--reset-cache 移除缓存文件
--config [string] 命令行的配置文件路径
- index.android.bundle里面包含了所有js代码(RN源码、第三方库代码和自己的业务代码)
构建APK
- 从RN项目根目录切换到android目录
cd android
- 依次执行Android打包命令(示例:windows电脑)
// 清除缓存
./gradlew clean
// 打包
./gradlew assembleRelease
- 加固后可上线到各应用市场
CodePush热更新发布
npx code-push release-react <appname> <platform> --t 1.0.0 --dev false --d Production --des "版本描述" --m true
参数介绍:
--t 1.0.0 指定发布的热更新版本
--dev false 是否是测试版
--d Production 发布环境
--des "" 版本描述
--m true 是否强更
示例:
npx code-push release-react first-rnapp-android android --t 1.0.0 --dev false --d Production --des "版本描述" --m true
npx code-push release-react first-rnapp-android android --t 1.0.0 --dev false --d Staging --des "版本描述" --m true