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部分的情况下，是可以不用发布更新的。

转载：https://blog.csdn.net/jin19920529/article/details/104650605