CodePush简介
作为一个跨平台应用开发框架，React Native虽然在动态更新方面提供了动态更新的基础，但是动态更新技术并没有想象的那么完善。好在微软开发了CodePush，填补了React Native应用在动态更新方面的空白。
CodePush是微软提供的一套用于React Native和Cordova的热更新服务，借助CodePush，开发者可以直接部署移动应用更新并快速实现代码的热更新，CodePush的官方地址为https://microsoft.github.io/c...。
CodePush作为一个中央仓库，开发者可以实时推送更新，然后客户端应用可以在应用启动时查询更新。借助CodePush，不需要重新审核和安装应用，就可以解决应用的缺陷和添加新特性。CodePush支持的功能如下：
• 支持直接对用户部署代码更新；
• 管理Alpha、Beta和生产环境应用；
• 支持React Native和Cordova跨平台技术的热更新；
• 支持JavaScript文件与图片资源的更新；
CodePush安装与账号注册
使用CodePush之前，需要先安装CodePush命令行工具，并注册CodePush账号和应用，安装命令如下：
npm install -g code-push-cli安装完成后可以通过code-push -v命令进行验证。然后，在终端输入命令 code-push register，会打开注册页面让开发者选择授权账号，如图11-11所示。
授权通过之后，CodePush会生成一个access key，复制此key到终端即可完成注册，如图11-12所示。
除了code-push register命令外，CodePush常用的命令还有：
• code-push login：登录CodePush
• code-push logout: 注销CodePush
• code-push access-key ls：列出access-key
• code-push access-key rm <accessKey>：删除某个access-key
为了让CodePush服务器知道创建的应用，还需要向服务器进行注册，注册的命令如下：
code-push app add <appName> <platform> react-native其中，appName表示应用的名称，platform表示应用的平台。在终端输入命令后即可完成应用的注册，如图11-13所示。
向CodePush添加应用时需要指明应用的平台，成功注册CodePush应用后，每个应用都会生成两个deployment key。其中，Production是用于生产环境的deployment key，Staging则是用于模拟环境的deployment key。
注册成功后，可以通过https://appcenter.ms/apps来查...，如图11-14所示。
需要说明的是，如果需要同时发布Android和iOS两个平台的热更新，那么在注册CodePush应用时需要注册两个应用，并获取两套deployment key。
除了code-push app add命令外，CodePush用于应用管理的命令还有：
• code-push app add：在登录账号中添加一个新的应用。
• code-push app remove <appName>：在登录账号中删除一个存在的应用。
• code-push app rename：重命名一个存在的应用。
• code-push app list：列出登录账号下所有的应用。
• code-push app transfer：把应用的所有权转移到另外一个账号。
集成CodePush SDK
完成CodePush账号的创建和应用的注册操作之后，接下来还需要集成CodePush SDK到React Native应用中。
首先，使用react-native init命令新建一个React Native项目，如下所示：
react-native init codepush然后，安装react-native-code-push插件，安装命令如下：
npm install --save react-native-code-push然后，运行link命令将react-native-code-push插件添加到原生工程中，如下所示：
react-native link react-native-code-push此时，系统会提示输入iOS和Android应用的deployment key，此时输入应用的Staging即可，如果不输入则可以直接点击【Enter】键跳过，如下所示：
? What is your CodePush deployment key for Android (hit <ENTER> to ignore)? What is your CodePush deployment key for iOS (hit <ENTER> to ignore)如果忘记deployment key的话，可以通过如下命令进行查看，如图11-14所示。
需要说明的是，使用react-native link命令链接原生库时，如果直接跳过输入deployment key，也可以在原生端手动配置。
成功添加react-native-code-push到CodePush项目后，还需要对原生工程做一些修改。
手动集成CodePush SDK
使用react-native link链接原生库时，如果跳过输入deployment key，也可以在原生端手动进行配置。
对于iOS来说，使用Xcode打开ios/codepush.xcodeproj目录下的iOS工程，然后Xcode的导航视图的PROJECT下选中项目，然后依次选择【Info】→【Configurations】→【添加】→【Duplicate Release Configuration】，然后输入Staging的key，如图11-15所示。
然后，在Build Settings面板选择【add User-Defined Setting】添加自定义编译环境配置，如图11-17所示。
然后，在User-Defined中添加CodePush的deployment key，如图11-18所示。
打开Info.plist文件，并在CodePushDeploymentKey列的Value选项中输入$(CODEPUSH_KEY)，如图11-19所示。
对于Android来说，使用Android Studio打开android工程，然后在工程的android/settings.gradle文件中引入react-native-code-push库，如下所示：
include ':react-native-code-push'project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')然后，在app/build.gradle文件中关联react-native-code-push库的依赖，如下所示：
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"dependencies { compile project(':react-native-code-push')}接下来，在MainApplication类的getPackages()方法中注册CodePush，如下所示：
@Overrideprotected String getJSBundleFile() { return CodePush.getJSBundleFile();} @Overridepublic boolean getUseDeveloperSupport() { return BuildConfig.DEBUG;}@Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new CodePush(BuildConfig.codepushkey,getApplicationContext(), BuildConfig.DEBUG) ); }由于CodePush的deployment-key分为生产环境与测试环境两种，所以可以在build.gradle文件中进行设置，如下所示：
android { releaseStaging { buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_STAGING_KEY>"' } release { buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"' } }}到此，CodePush热更新所需要的原生配置就完成了，接下来只需要修改React Native的逻辑即可。
iOS应用热更新示例
使用Xcode打开ios/codepush.xcodeproj文件，然后打开AppDelegate.m文件，可以看到此时jsCodeLocation相关代码如下：
#if DEBUG return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];#else return [CodePush bundleURL];#endif}从上面的代码可以看出，在非Debug状态下，系统默认加载的资源地址为CodePush的bundleURL，为了加载CodePush的Bundle资源，需要手动修改编译选项为Release。具体来说，打开Xcode的菜单，然后依次选择【Product】→【Scheme】→【Edit Scheme】，如图11-19所示。
完成上述原生配置之后，接着打开React Native的入口文件index.js，并对index.js文件进行如下的修改。
import React, {Component} from 'react';import {AppRegistry, Platform, StyleSheet, Text, View} from 'react-native';import {name as appName} from './app.json';import codePush from 'react-native-code-push'type Props = {};export default class App extends Component<Props> { constructor(props) { super(props); this.state = { message: '' }; } componentDidMount() { codePush.checkForUpdate().then((update) => { if (update) { this.setState({message: '有新的更新！'}) } else { this.setState({message: '已是最新，不需要更新！'}) } }) } render() { return ( <View style={styles.container}> <Text style={styles.welcome}>版本号 1.0</Text> <Text style={styles.instructions}>{this.state.message}</Text> </View> ); }}//省略样式文件AppRegistry.registerComponent(appName, () => codePush(App));如上所示，可以componentDidMount生命周期函数会检查CodePush应用是否需要更新，如果检测需要更新则下载CodePush应用的更新。重新编译和运行应用，效果如图11-21所示。
然后，将index.js文件显示的版本号升级为1.1，修改内容如下：
render() { return ( <View style={styles.container}> <Text style={styles.welcome}>版本号 1.1</Text> <Text style={styles.instructions}>{this.state.message}</Text> </View> ); }接下来，使用CodePush的code-push release命令行工具发布iOS的更新，如下所示：
code-push release-react codepush ios等待系统打包并发布热更新的bundle文件，发布成功后关闭并重新打开应用，就可以看到应用启动时会提示更新，如图11-22所示。
在检测到更新后，系统会下载最新的资源并更新，当再次关闭并重新打开应用时，可以看到应用更新成功后的效果。并且，还可以使用CodePush提供的code-push deployment命令来查看更新情况，如图11-23所示。
和iOS的应用热更新类似，Android应用的热更新也可以使用这一步骤。