代码推送是指将新代码更新或部署到软件应用或系统的过程。它涉及将最新版本的代码从开发环境转移到生产环境，使更改实时生效并对用户可访问。
步骤1：在 AppCenter 上注册你的应用
-
登录 AppCenter -
为Android和iOS添加一个新应用。
-
填写必填字段，然后点击 Add new app 按钮。
示例
Android
iOS
-
点击 Distribute -> CodePush，然后点击Create standard deployments。 -
记下发布更新命令，每次你推送代码时都会用到。 -
你可以编辑、删除或创建你选择的新环境，前往 Distribute -> CodePush，点击setting图标，然后点击三个点。
Android
$ appcenter codepush release-react -a xxxxx/Awesome-Project -d Production
/* Production is the enviroment name
you can also change name of your choice by following the above step*/
iOS
$ appcenter codepush release-react -a xxxxx/Awesome-Project-IOS -d Production
/* Production is the enviroment name
you can also change name of your choice by following the above step*/
步骤2：在 React Native 中安装CodePush SDK
使用以下命令创建一个新的React Native项目
npx react-native init AwesomeProject
使用 npm install -g appcenter-cli 全局安装 CodePush。
npm install -g appcenter-cli
将CodePush库集成到你的React Native项目中。
$ npm install react-native-code-push
OR
$ yarn add react-native-code-push
通过CLI登录到 AppCenter，使用 appcenter login 并在你的终端运行下面的命令。
appcenter login
一个新的网页将在你的浏览器上弹出，上面有一个令牌。复制并粘贴到终端。
浏览器中输入你的令牌：[在此处粘贴]
步骤3：特定平台的配置
安卓设置
1.修改 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')
2.在 android/app/build.gradle 中添加代码
apply from: “../../node_modules/react-native-code-push/android/codepush.gradle”
3.更新 MainApplication.Java
…
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
…
// 2. Override the getJSBundleFile method in order to let
// the CodePush runtime determine where to get the JS
// bundle location from on each app start
@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
};
}
4.现在前往 AppCenter，选择你的特定项目，然后进入Distribute->CodePush Click。点击 setting 图标并复制 Production key 。
5.将此生产密钥粘贴到你的 android/app/build.gradle 下的 buildTypes 中。
resValue “string”, “CodePushDeploymentKey”, ‘“”’ // In debug
resValue “string”, “CodePushDeploymentKey”, ‘PUT_YOUR_DEVELOPMENT_KEY_HERE’ // In release
// Replace PUT_YOUR_DEVELOPMENT_KEY_HERE will your CodePush key
iOS 设置
1.首先运行 pod install 来更新 CocoaPods 依赖项。 2.编辑 AppDelegate.m 以允许 CodePush 包选择。
#import <CodePush/CodePush.h>
3.在 AppDelegate.m 中找到以下代码行，该行设置了生产版本的桥接源URL，然后按照下面所示进行替换。
return [[NSBundle mainBundle] URLForResource:@”main” withExtension:@”jsbundle”];
用它来替换:
return [CodePush bundleURL];
4.将部署密钥添加到 Info.plist 。前往 AppCenter，选择你的项目，然后前往 Distribute -> CodePush -> setting 图标，复制生产密钥，并将其粘贴到你的 Info.plist 文件中。
…
<key>CodePushDeploymentKey</key>
<string>PUT_YOUR_DEVELOPMENT_KEY_HERE</string>
…
// Replace PUT_YOUR_DEVELOPMENT_KEY_HERE with CodePush key
步骤4：用 CodePush 包裹你的 App.js
用CodePush包裹你的应用的主要组件。
import React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
import CodePush from 'react-native-code-push';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.heading}>
CodePush: Empowering React Native Developers with Seamless Over-the-Air
Updates
</Text>
<Image
style={styles.image}
resizeMode={'contain'}
source={{uri: 'https://loremflickr.com/g/520/540/paris'}}
/>
<View style={styles.button}>
<Text style={styles.buttonText}>BEFORE CODE PUSH</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 16,
},
heading: {
fontSize: 24,
marginBottom: 20,
fontWeight: '700',
textAlign: 'center',
},
image: {
width: 200,
height: 200,
borderRadius: 10,
},
button: {
padding: 15,
marginTop: 20,
borderRadius: 8,
backgroundColor: '#0E4B91',
},
buttonText: {
color: '#FFFFFF',
fontWeight: '700',
},
});
export default CodePush(App);
运行项目：
$ react-native run-android // for android
$ react-native run-iOS // for iOS
你的安卓和iOS设置已经完成，现在你已经准备好进行你的第一次代码推送..
注意：在进行CodePush更新之前，需要在Android和iOS设备上生成并安装发布版本。
步骤5：执行CodePush
进行所需的JS更改并保存。
import React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
import CodePush from 'react-native-code-push';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.heading}>
CodePush: Empowering React Native Developers with Seamless Over-the-Air
Updates
</Text>
<Image
style={styles.image}
resizeMode={'contain'}
source={{uri: 'https://loremflickr.com/520/540'}}
/>
<View style={styles.button}>
<Text style={styles.buttonText}>AFTER CODE PUSH</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 16,
},
heading: {
fontSize: 24,
marginBottom: 20,
fontWeight: '700',
textAlign: 'center',
},
image: {
width: 200,
height: 200,
borderRadius: 10,
},
button: {
padding: 15,
marginTop: 20,
borderRadius: 8,
backgroundColor: '#B7012F',
},
buttonText: {
color: '#FFFFFF',
fontWeight: '700',
},
});
export default CodePush(App);
2.运行适用于 Android 或 iOS 的 CodePush命令。
Android
appcenter codepush release-react -a xxxxx/AwesomeProject -d Production
iOS
appcenter codepush release-react -a xxxxx/AwesomeProject-IOS -d Production
运行上述命令将在你的终端显示所有必需的信息。确保终端中指定的版本与你的项目中 build.gradle 和 Info.plist 文件中指定的版本相同。
在AppCenter中检查版本信息
AppCenter->ProjectName->Distribute->CodePush
点击上述版本，然后点击屏幕右上角的设置图标
启用 Required update 按钮以确保用户拥有最新版本。
在AppCenter中，对iOS遵循上述相同的步骤。
刷新后，更改将在已安装的应用程序中显示。
步骤6：故障排查和回滚：
关闭启用按钮将禁用更新并回滚到之前的更改
需要重点注意
匹配版本
-
始终在与初始发布相同的应用版本上执行CodePush更新。 -
版本之间的一致性确保了顺畅的更新。
升级应用版本：
-
在更新应用程序时，需要在Android和iOS的配置文件中都更改版本。 -
在运行CodePush命令之前，使用新版本生成一个发布构建。 -
先前的版本保持不变。
监控和分析
-
AppCenter提供了关于更新采纳率的分析 -
监控更新的成功程度并收集用户反馈。
最佳实践
-
在部署到生产环境之前，彻底测试更新。 -
保持清晰的版本管理，以避免在更新过程中产生混淆。
限制
CodePush只能更新你的应用的JavaScript包。它无法更新原生代码。这意味着任何需要修改原生模块的更改都无法仅通过CodePush来实现。
总结
CodePush崭露头角，重新定义了移动应用程序的更新方式。这种由微软精心打造，专为React Native等框架量身定制的云端解决方案，重塑了用户体验并加速了创新。
等待应用商店审批的日子已经一去不复返了。CodePush 赋予你快速响应错误、用户反馈和新兴趋势的能力。这种灵活性不会牺牲质量；相反，它增强了质量。
在 React Native 的领域中，CodePush 是创新的催化剂。它是我们以技巧应对动态变化、迅速响应用户需求、精确完善的应用程序的工具。当你深入了解 CodePush 时，不仅仅是在接受更新，是在拥抱进步、效率和提供真正卓越应用程序的艺术。
原文始发于微信公众号（前端混合开发）：在 React Native 中实现 CodePush 以进行热更新
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/246491.html
