RN项目集成react-native-code-push(四)-- ReactNative项目集成react-native-code-push
参考资料:https://github.com/Microsoft/react-native-code-push
环境:react-native(0.58.6)
第一部分:注册app
1.打开控制台,并执行代码:
code-push app add <appName> <os> <platform>
生成发布环境的DelopmentKey:Production(生产环境)、Staging(演示环境)。
说明:同一个项目,iOS与Android需要分别注册。
Android建议使用applicationId,如图:
iOS建议使用Bundle Identifier,如图:
第二部分:安装react-native-code-push组件
1.在项目更目录下执行:
yarn add react-native-code-push
或安装指定版本:
yarn add react-native-code-push@5.5.2
2.自动关联配置,执行:
react-native link react-native-code-push
说明,因为本项目的react-native版本为0.58.6,<0.60,所以需要执行此步骤,自动生成配置。在此步骤中,需要根据提示分别输入前面注册好的DelopmentKey。根据场景选择Production还是Staging。此处选择的是Production。
第三部分:在Android上集成
1.手动集成
步骤1:打开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')
步骤2:打开 android --> app --> build.gradle ,添加代码:
implementation project(':react-native-code-push')
且将versionName改为3位数的版本号,如:1.0.0(默认为1.0)。
说明:codePush的原始包版本号必须为3位数的版本号,否则更新无效。
步骤3:打开 android --> app --> src -->main -->res --> values -->string.xml 文件,并添加以下代码:
<string moduleConfig="true" name="CodePushDeploymentKey">生成的Android的DeploymentKey</string>
步骤4:打开 android --> app --> src -->main --> java --> … -->MainApplication.java 文件,添加以下3处代码:
import com.microsoft.codepush.react.CodePush;
@Override protected String getJSBundleFile(){ return CodePush.getJSBundleFile(); }
new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG,"code-push-server服务地址"),
至此,完成了在Android上的集成。
2.自动集成
<1>若react-native link 成功,只需要在 android --> app --> src -->main --> java --> … -->MainApplication.java 文件中,添加自己的code-push-server服务器的地址即可,如图:
<2>打开android --> settings.gradle 文件,将默认的
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-code-push\android\app')
修改为:
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_module因为s/react-native-code-push/android/app'
如图:
说明:其默认的路径用的是 \ ,此处需要改为 / 。
第四部分:在iOS上集成
1.手动集成
步骤1: 点击 Libraries --> Add Files to “项目名” ,添加包资源文件CodePush.xcodeproj。
成功后如图:
步骤2:在Build Phases --> Link Binary With Libraries中,点击添加 libCodePush.a、libz.tbd 两个文件,如图:
步骤3:在Build Settings --> Search Path --> Header Search Paths中,点击添加
$(SRCROOT).. ode_modules eact-native-code-pushiosCodePush
步骤4:打开 info.plist文件,添加CodePushServerURL、CodePushDeploymentKey两个字段,并赋值。如图:
说明:CodePushServerURL为code-push-server服务器的部署地址,CodePushDeploymentKey为前期生成的iOS的DeploymentKey。此处我们采用的是Production版本的。
步骤5:打开 General --> Identity -->Version,将版本号改为3位数的数字,如1.0.0(默认位1.0)。因为code-push只能识别3位数的版本号,如图:
步骤6:打开 AppDelegate.m文件,添加以下代码:
#import <CodePush/CodePush.h>
#ifdef DEBUG jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; #else jsCodeLocation = [CodePush bundleURL]; #endif
至此,完成了在iOS上的集成。
2.自动集成
<1>若react-native link 成功,只需要在info.plist文件,添加CodePushServerURL字段即可,并赋值。如图:
说明:CodePushServerURL为自己的code-push-server服务器的地址。
<2>必要情况下, 请重新集成 Libraries 下的 CodePush.xcodeproj 文件与Build Phases --> Link Binary With Libraries中的 libCodePush.a、libz.tbd 两个文件,参考步骤1、步骤2。
当项目集成了react-native-code-push后,还需要在js端来部署代码执行命令。
第五部分:静默更新
1.在启动页面添加以下代码:
<1>引入组件
import codePush from 'react-native-code-push';
<2>添加集成代码
组件名=codePush(组件名)
说明:该组件名为当前页面组件的名称。
至此:完成了code-push代码在js部分的集成。
第六部分:通知更新
1.在启动页面添加以下代码:<1>引入组件
import codePush from 'react-native-code-push';
<2>配置DeploymentKey
const DEPLOYMENT_KEY=Platform.OS==='ios'?'iOS的DeploymentKey':'Android的DeploymentKey';
<3>在 componentWillMount() {}中添加代码:
codePush.disallowRestart();//禁止重启 this.syncImmediate(); //开始检查更新
<4>在 componentDidMount(){}中添加代码:
codePush.allowRestart(); //在加载完了,允许重启
<5>定义syncImmediate()方法:
syncImmediate() { codePush.sync( { //安装模式 //ON_NEXT_RESUME 下次恢复到前台时 //ON_NEXT_RESTART 下一次重启时 //IMMEDIATE 马上更新 mandatoryInstallMode : codePush.InstallMode.IMMEDIATE, deploymentKey: DEPLOYMENT_KEY, //对话框 updateDialog : { //是否显示更新描述 appendReleaseDescription : true , //更新描述的前缀。 默认为"Description" descriptionPrefix : "更新内容:" , //强制更新按钮文字,默认为continue mandatoryContinueButtonLabel : "立即更新" , //强制更新时的信息. 默认为"An update is available that must be installed." mandatoryUpdateMessage : "必须更新后才能使用" , //非强制更新时,按钮文字,默认为"ignore" optionalIgnoreButtonLabel : '稍后' , //非强制更新时,确认按钮文字. 默认为"Install" optionalInstallButtonLabel : '后台更新' , //非强制更新时,检查到更新的消息文本 optionalUpdateMessage : '有新版本了,是否更新?' , //Alert窗口的标题 title : '更新提示' } } ); }
代码如图:
至此,完成了弹窗更新的代码集成。
<2>发布更新
对于弹窗更新,一般需要填写更新的内容。此内容在发布命令中来填写,执行:
code-push release-react <appName> <os> -m --description <更新描述> --deploymentName <deploymentName> --targetBinaryVersion <目标基础版本号>
说明:
appName – 项目的bundleId或applicationId
os – 系统版本:Android 或 iOS
-m – 是否强制(mandatory),不强制的话,则不用添加此标识
–description --更新描述
–deploymentName – 发布环境
–targetBinaryVersion – 目标基础版本,即原生部分配置的版本号
注意:每当打包一个新的安装包时,需要在code-push平台发布一个对应的版本,作为这个安装包的原始更新版本。若没有原始更新版本,则后续的热更新会因为没有原始包对比,而无法更新。
更新后的照片:
第七部分:注意事项
1.每当发布一个安装包时,都要在code-push-server中发布一个对应的原始包。否则下一次发布因找不到与安装包对应的版本,而导致失败。
2.热更新只能更新代码的js部分,对于原生部分的更新,需要重新打安装包。且在只调整了原生部分,未动js部分的情况下,是可以不用发布更新的。
系列文章:
RN项目集成react-native-code-push(一)-- Linux搭建code-push-server服务器
RN项目集成react-native-code-push(二)-- CodePush安装环境与登录
RN项目集成react-native-code-push(三)-- Code-Push常用管理命令
RN项目集成react-native-code-push(四)-- ReactNative项目集成react-native-code-push
- IOS与React Native混编,将RN框架使用CocoaPods集成到原生项目中
- 利用CodePush对react-native项目热更新(以android为例)
- React-Native Android集成Code-Push 热更新
- React Native学习笔记之--向原生应用中集成RN页面
- react-native-code-push热更新与app版本的关系
- React Native集成到现有Android Studio项目
- React-Native集成到已有项目过程及问题处理
- React Native CodePush实践小结
- 将React Native集成到现有的android项目中
- 在Windows上将ReactNative集成到现有的Android项目
- React Native 集成到原有Android项目中
- 原生Android项目中集成React native页面
- android 原生项目集成react-native的坑
- react-native学习(RN)--之Window环境下搭建环境配置,以及初始化建立react-native项目,(真机和模拟器运行的相关错误解决办法,android打包报错)
- 解决react-native项目启动安卓模拟器报错:The development server returned response error code:500
- 使用 Code-Push 热更新 ReactNative 常用命令整理
- ReactNative项目中集成旧版本的Angular 1.x的项目
- ReactNative——集成RN到原生应用
- 最新iOS原生项目集成React-Native
- Android 原生项目集成React Native——传参