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

@Overrideprotected 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 DEBUGjsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];#elsejsCodeLocation = [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 : "更新内容：" ,//强制更新按钮文字，默认为continuemandatoryContinueButtonLabel : "立即更新" ,//强制更新时的信息. 默认为"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

RN项目集成react-native-code-push（四）-- ReactNative项目集成react-native-code-push相关推荐

从 Android 到 React Native 开发（四、打包流程解析和发布为 Maven 库）
1.从 Android 到 React Native 开发(一.入门) 2.从 Android 到 React Native 开发(二.通信与模块实现) 3.从 Android 到 React Nat ...
React Native开源项目如何运行（附一波开源项目）
学习任何技术,最快捷的方法就是学习完基础语法,然后模仿开源项目进行学习,React Native也不例外.React Native推出了1年多了, 开源项目太多了,我们以其中一个举例子.给大家演示下如 ...
软件项目组织管理（四）项目集成管理
文章目录什么是集成管理集成管理的主要工作 SWOT方法筛选信息技术项目过程项目章程集成变更控制变更控制委员会利益相关者分析什么是集成管理在项目生命周期中协调所有其他项目管理知识领域所 ...
antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目
项目开发过程中,大多数时候我们使用别人搭建好的脚手架编写代码,是项目的参与者.对于一些细节往往被忽略了.其中代码检测本身是一类非常简单的配置,但涉及不同框架和语言组合使用的时候,可能比想象中要困难,本 ...
什么是 Native、Web App、Hybrid、React Native和Weex？
一句话概要 Native.Web App.Hybrid.React Native(后面以RN简称).Weex 间的异同点,后期同步小程序和PWA. App常用开发模式简介此处App为应用,appli ...
[万字长文]使用 React 重写学成在线前端项目 I 代码完整可运行，步骤有详解
[万字长文]使用 React 重写学成在线前端项目 I 代码完整可运行,步骤有详解准备工作安装必备工具/库 nodejs React 脚手架需要的 node 依赖包分析需求初始化项目搭建框 ...
（最新react-native-0.59.5) 如何将ReactNative项目集成到现有得Android项目中（两种实现方法之一）
背景:最近在学习React-Native相关的知识,有个需求,如果已经存在一个成熟的Android 或者 IOS项目,如何实现在后续的开发中用RN来实现部分功能.再此我只是讲解一下Android de ...
前端基础第四天项目社交媒体黑马头条项目-登录注册和个人中心
一.项目初始化目标能使用 Vue CLI 创建项目了解 Vant 组件库的导入方式掌握制作使用字体图标的方式掌握如何在 Vue 项目中处理 REM 适配理解 axios 请求模块的封装使 ...
Vite（四）后端集成、比较Snowpack、从 v1 迁移、Awesome Vite.js
Vite(四)后端集成.比较Snowpack.从 v1 迁移.Awesome Vite.js 文章目录 Vite(四)后端集成.比较Snowpack.从 v1 迁移.Awesome Vite.js 1 ...
什么是 Native、Web App、Hybrid、React Native 和 Weex？
(点击上方公众号,可快速关注) 来源:zwwill_木羽 segmentfault.com/a/1190000011154120 一句话概要 Native.Web App.Hybrid.React N ...

RN项目集成react-native-code-push（四）-- ReactNative项目集成react-native-code-push

第一部分：注册app

第二部分：安装react-native-code-push组件

第三部分：在Android上集成

1.手动集成

2.自动集成

第四部分：在iOS上集成

1.手动集成

2.自动集成

第五部分：静默更新

1.在启动页面添加以下代码：

第六部分：通知更新

1.在启动页面添加以下代码：

<2>发布更新

第七部分：注意事项

RN项目集成react-native-code-push（四）-- ReactNative项目集成react-native-code-push相关推荐

最新文章

热门文章