在React Native中实现CodePush

实时重载和热重载是React Native中两个了不起的功能。然而，移动开发者表示希望在生产中直接向终端用户推送更新，这将是一个比在Google Play商店和iOS App Store更新应用更快、更有效的选择。

在本教程中，我们将使用react-native-code-push，一个用于CodePush的React Native模块，直接向用户部署应用更新。我们将提供一步步的指导，甚至通过一个详细的演示来开始。首先，让我们了解一下什么是CodePush以及它的好处是什么。

什么是CodePush？

在移动应用程序中，修复错误会破坏整个应用程序。一旦应用程序被发布，任何对代码的更新都必须在推送给用户之前由移动应用商店重新编译和审查。

CodePush是一项由微软AppCenter管理的云服务，允许开发者即时向终端用户部署移动更新。CodePush将JavaScript代码与任何发布到CodePush服务器的更新同步，这意味着你不必在任何一个应用商店更新你的应用。

在新的更新的情况下，Codepush提供回滚，它包括许多设备和平台的测试配置。

设置CodePush

要将CodePush添加到一个应用程序，该应用程序必须已经被部署到一个移动商店。在本教程中，你可以跟随我下面的例子，或者在你现有的一个应用程序中实现CodePush。我们将首先在AppCenter上创建一个标准部署。

如果你还没有，在AppCenter上创建一个账户。创建一个新的应用程序，并选择添加新的应用程序按钮。你应该看到以下页面。

我们为我们的应用程序添加了一个名字：Meatball App。然后，我们从生产版、测试版和商店中选择了我们的发布类型。接下来，选择你要开发的操作系统和平台。一旦你添加了这些细节，你可以选择创建新的应用程序按钮。

配置选项

有三个不同的选项可以为不同的平台配置你的应用程序。

其一，构建频率让你在分支发生变化时自动运行不同平台的构建。分布式构建允许你将应用分发到移动应用商店。检查你的AppCenter仪表板的Distribute部分来启用这个功能。最后，你可以将构建脚本添加到你的package.json，这些脚本在克隆后、构建前和构建后运行，并代表应用程序开发的各个阶段。

分发选项

要在iOS App Store或Android Google Play商店发布你的React Native应用程序，你首先需要连接你的应用程序。导航到AppCenter仪表板的Distribute部分，点击**Solutions，**并将您的应用程序连接到商店。

要在iOS上启动你的应用程序，你需要注册苹果开发者。

创建标准部署

现在我们已经设置并配置了CodePush，从你的应用仪表板上导航到CodePush，点击创建标准部署。

在AppCenter仪表板的右上角，选择Staging作为你的应用环境。

一旦你选择了应用环境，点击仪表板右侧的设置图标，就可以看到你的应用的私钥。

现在我们已经设置了标准的部署，让我们使用react-native-code-push将CodePush整合到我们的React Native应用中。

将CodePush集成到React Native中

首先，我们使用下面的命令安装 react-native-code-push

Yarn:

yarn add react-native-code-push

npm。

npm i --save react-native-code-push

集成CodePush对于iOS和Android是不同的。让我们仔细看一下。

iOS设置

要将CodePush插件添加到一个原生的iOS项目中，首先，用下面的命令安装pod。

cd ios
pod install 
cd ..

接下来，我们要安装cocoa pods的依赖项。导航到你的AppDelegate.m 文件，将CodePush头文件导入你的文件中。

import <CodePush/CodePush.h>

安卓设置

要在本地Android项目中集成react-native-code-push，请导航到Android文件夹中的settings.gradle 文件，并添加以下代码块。

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

接下来，我们将把新导入的codepush.gradle 文件作为一个构建任务添加到我们的react.gradle 文件中。

apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

在上面的代码片段中，我们将CodePush应用于我们的React Native Android Gradle，从我们的应用程序的Node模块中导入它。

接下来，我们将更新我们的MainApplication.java 文件，在我们的应用程序中包含CodePush。

import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

首先，我们从软件包列表中导入CodePush插件类到我们的应用程序。接下来，我们为CodePush创建了一个覆盖，以确定当我们的应用程序启动时，我们的JavaScript包应该在哪里渲染。

在React Native中初始化CodePush

为了初始化CodePush，我们将用CodePush提供的高阶组件来包装我们的根组件。我们还将添加一些CodePush的选项，比如用于向用户显示实时更新的标题标签。

import CodePush from 'react-native-code-push';

let CodePushOptions = {
  checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
  mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,
  updateDialog: {
    appendReleaseDescription: true,
    title: "a new update is available!
}

class MeatBallApp extends Component {
    ...
}

export default CodePush(CodePushOptions)(meatBallApp);  

在上面的代码块中，我们从我们的软件包中导入了CodePush ，然后为我们的应用程序列出了几个选项。其中，checkFrequency定义了我们希望我们的应用程序何时检查新的更新。在我们的案例中，我们将其设置为ON_APP_START ，然而，还有其他选项可用。mandatoryInstallMode 定义了我们要安装强制更新的时间。在我们的应用程序中，我们标记了它ON_APP_START.

updateDialog ，决定了当更新可用时，是否会向用户呈现确认文本或屏幕，以及将呈现什么样的文本或对象。如果设置为true ，我们在Android和iOS上都会渲染默认的更新字符串。最后，我们使用updateDialog: title 和一个string类型的title ，将标题添加到一个 updateDialog 。

根据你的应用程序的性质，你可能还想添加更多的选项，比如minimumBackgroundDuration ，它用于设置应用程序在重启之前在后台运行的最小时间（秒）。

使用CodePush部署应用程序的更新

要使用CodePush发布React Native应用程序的更新，首先，我们需要安装App Center CLI包。

Yarn。

yarn global add appcenter-cli

npm。

npm install -g appcenter-cli

一旦我们安装了App Center CLI包，我们将使用下面的命令登录到我们的AppCenter。

appcenter login

现在，我们可以用CodePush发布应用程序的更新，格式如下。

appcenter CodePush release-react -a {user}/{app name} -d {environment}

为了推送更新到我们的应用程序，我们将使用下面的代码。

appcenter CodePush release-react -a Fortune-Ikechi/MeatBallApp -d Production

在React Native应用程序上使用CodePush推送更新的另一种方法是使用下面的格式在我们的应用程序的package.json ，将命令作为脚本添加。

"scripts: {
  "CodePush:ios": "appcenter CodePush release-react -a Fortune-Ikechi/MeatBallApp -d Production",
  "CodePush:android": "appcenter CodePush release-react -a Fortune-Ikechi/MeatBallApp-Android -d Production"
}

一旦你添加了更新，重新加载你的AppCenter仪表盘以确保你的版本在那里。当你重新运行你的应用程序时，你应该能够下载你的应用程序的最新版本。

总结

现在，你知道如何将CodePush添加到你的React Native应用中了吧React-native-code-push模块允许你直接向你的终端用户部署应用更新，而不是通过移动商店。我们创建了标准部署，为iOS和Android应用程序设置了react-native-code-push，最后，部署了我们的更新。

你可以在CodePush文档和微软AppCenter文档中阅读更多内容。我希望你喜欢这个教程

The postImplementing CodePush in React Nativeappeared first onLogRocket Blog.