您的位置:首页 > Web前端 > React

RN项目集成react-native-code-push(四)-- ReactNative项目集成react-native-code-push

2020-06-21 04:59 741 查看

参考资料: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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: