# RN 配置热更新+使用文档
# 一、搭建本地Code Push
服务
配置本地服务端和注册 app 等,参考
最新 React Native 搭建本地 Code Push 服务(非常全!)
# 1. 首先全局安装微软提供的 code-push-cli 工具
npm install code-push-cli@latest -g
# 常用code-push
命令
注册账号: code-push register
登陆: code-push login
注销: code-push logout
添加项目: code-push app add app 名称
删除项目: code-push app remove app 名称
列出账号下的所有项目: code-push app list
显示登陆的 token: code-push access-key ls
部署一个环境: code-push deployment add appName deploymentName
删除部署: code-push deployment rm appName
列出应用的部署: code-push deployment ls appName
查询部署环境的 key: code-push deployment ls appName -k
我们会在后面使用此工具创建,发布,更新 App
# 2. 登录Code Push
服务器
# code-push login http://localhost:3000
code-push login http://172.16.6.190:3000
账号:
admin
密码:
123456
如已经登陆, 需要注销, 执行下面命令
code-push logout
# 3. 创建应用
# Android
应用
code-push app add CodePushAndroid android react-native
# iOS
应用
code-push app add CodePushIos iOS react-native
然后输入到命令行终端中,执行完毕会生成两个 key
, 发给原生开发人员
就像这样 👇
Successfully added the "CodePushAndroid" app, along with the following default deployments:
┌────────────┬───────────────────────────────────────┐
│ Name │ Deployment Key │
├────────────┼───────────────────────────────────────┤
│ Production │ kl6jlkEF5tIH34QVuuxkPrVNQKOl4ksvOXqog │
├────────────┼───────────────────────────────────────┤
│ Staging │ YTMOeRcENaByW4jIvl8CVFnTJAYm4ksvOXqog │
└────────────┴───────────────────────────────────────┘
如果已经存在应用, 需要删除后重新创建, 或者直接使用原来的
key
(原生那边就不用更改), 具体的查看下面的获取应用的Key
# 4. 更新应用
react-native
项目下执行,test
用来匹配是否检查安装应用
code-push release-react CodePushAndroid android --d Production --t 0.1.0 --des [test]生产环境更新1 --m true
code-push release-react CodePushAndroid android --d Staging --t 0.1.0 --des [test]测试环境更新1 --m true
code-push release-react CodePushIos ios --d Production --t 0.1.0 --des [test]生产环境更新1 --m true
code-push release-react CodePushIos ios --d Staging --t 0.1.0 --des [test]测试环境更新1 --m true
参数说明:
d
: 发布的环境,Staging
表示开发人员自己调试使用的环境,Production
表示发布给测试人员使用的环境t
: 版本号,只支持 3 位数,跟原生应用约定好一致des
: 版本描述:其中的test
表示发给设定了版本表示为test
的安装包, 如果没有写, 表示通知所有安装包
更新成功后, 是这样的 👇
node node_modules\react-native\local-cli\cli.js bundle --assets-dest C:\Users\12047\AppData\Local\Temp\CodePush\CodePush --bundle-output C:\Users\12047\AppData\Local\Temp\CodePush\CodePush\index.android.bundle --dev false --entry-file index.js --platform android
Welcome to React Native!
Learn once, write anywhere
info Writing bundle output to:, C:\Users\12047\AppData\Local\Temp\CodePush\CodePush\index.android.bundle
info Done writing bundle output
info Copying 192 asset files
info Done copying assets
Releasing update contents to CodePush:
Successfully released an update containing the "C:\Users\12047\AppData\Local\Temp\CodePush\CodePush" directory to the "Staging" deployment of the "CodePushAndroid" app.
# 静默更新应用(不弹窗,后台下载)
比如在iOS
平台,执行以下命令:
测试环境
code-push release-react CodePushIos ios --d Staging --t 1.2.1 --des [test]{SilentUpdate}测试环境静默更新 --m true
生产环境
code-push release-react CodePushIos ios --d Production --t 1.2.1 --des [test]{SilentUpdate}测试环境静默更新 --m true
其中, 在des
中添加{SilentUpdate}
表示走静默更新,这边是完全匹配,如果匹配的话就在后台自动下载更新,不会再弹框提示
# 5. 获取应用的 Key
code-push deployment ls CodePushAndroid -k
code-push deployment ls CodePushIos -k
# 6. 清除推送的更新(终止)
code-push deployment clear CodePushAndroid staging
code-push deployment clear CodePushIos staging
# 二、配置安卓环境(自动 link
可能会导致失败)
# 1. android/settings.gradle file
添加
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
# 2. android/app/build.gradle
添加
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
# 3. MainApplication.java
添加
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
// 2. Override the getJSBundleFile method in order to let
// the CodePush runtime determine where to get the JS
// bundle location from on each app start
@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
};
}
# 4. strings.xml
添加
<resources>
<string name="app_name">gms</string>
<string moduleConfig="true" name="CodePushDeploymentKey">you key</string>
<string moduleConfig="true" translatable="false" name="CodePushServerUrl">serverUrl</string>
</resources>
# 5. bulid.gradle
配置 defaultConfig
中的 versionName
为 3 位数,例如 versionName
"1.0.0"
# 6.安装 react-native-code-push 6.1.1
yarn add react-native-code-push@6.1.1 -S
# 7.更新命令
code-push release-react CodePushDemoAndroid android --d Staging --t 1.0.0 --des 测试环境更新 --m true
# 配置 ios 环境(link)
# 1. 运行 cd ios && pod install
pod
如果失败, 就切换源,profile
文件头部添加
source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'
# 2. AppDelegate.m 添加,及替换
#import <CodePush/CodePush.h>
...
...
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
return [CodePush bundleURL];
#endif
}
# 3.xcode -> PROJECT -> Info -> Configurations -> 点击+ -> 选泽 Duplicate “Release Configaration , 输入 Staging。 这表示新建一种打包方式 名称是 Staging。
# 4.xcode -> TARGET -> Build Setting,点击+,Add User-Defined Setting
然后输入 CODEPUSH_KEY,然后在下面的 release 中填写 product deployment key, 在 Staging 下填写 staging deploymeng key, debug 可以不用填写。
同理,新增 CODEPUSH_HOST, 填写各个环境的 code-push 服务器地址,如 Staging 我们可以填写 本机 iP://3000;(此处可能不执行,若失败可不添加)
# 5.ios/<项目>/info.plist 中新增
<key>CodePushDeploymentKey</key>
<string>$(CODEPUSH_KEY)</string>
<key>CodePushServerURL</key>
<string>$(CODEPUSH_HOST)</string>
// 上一步的CODEPUSH_HOST若添加不成功,此处写死
// 修改为三位数版本号
<key>CFBundleShortVersionString</key>
<string>1.7.0</string>
# 更新命令模板
code-push release-react CodePushDemoAndroid android --d Staging --t 1.0.0 --des 测试环境更新1 --m true
code-push release-react CodePushDemoIos ios --d Staging --t 1.0.0 --des 测试环境更新1 --m true