React Native热更新(iOS)-Pushy

React Native的出现，使的开发iOS代码出现了更便捷的方式。由于RN是使用脚本语言编写的，实现了“解释执行”的方式，而这种执行方式的修改只需替换脚步即可，不需要重新发布程序，热更新的方式极大的方便了迭代开发。

今天我们选择的热更新组件是Pushy，这是国内开发的，功能类似CodePush（CodePush在国内访问及其慢，长城宽度根本无法访问），Pushy支持增量更新，最大化的降低更新的数据量，节约流量。

下面介绍如何利用Pushy进行热更新：

1. 创建react native工程

$react-native init PushyDemo

2. 安装update工具, Pushy热更新需要update配合使用

RN 0.29+

$npm install -g react-native-update-cli

RN 0.28及以下

$npm install -g react-native-update-cli rnpm

3. 在PushyDemo目录下添加Pushy组件并自动link

RN 0.29+

$ npm install --save react-native-update

$ react-native link react-native-update

RN 0.27-0.28

$ npm install --save react-native-update@2.x

$ rnpm link react-native-update

RN 0.26及以下

$ npm install --save --save-exact react-native-update@1.0.x

$ rnpm link react-native-update

4. 配置Bundle URL

在工程target的Build Phases --> Link Binary with Libraries中加入libz.tbd、libbz2.1.0.tbd
在你的AppDelegate.m文件中增加如下代码：

#import "RCTHotUpdate.h"

#if DEBUG

	// 原来的jsCodeLocation

	jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

	#else

	jsCodeLocation=[RCTHotUpdate bundleURL];

#endif

5. 配置ATS

从iOS9开始，苹果要求以白名单的形式在Info.plist中列出外部的非https接口，以督促开发者部署https协议。在我们的服务部署https协议之前，请在Info.plist中添加如下，其中true的类型必须是String：

NSAppTransportSecurity

	NSExceptionDomains

		reactnative.cn

	NSIncludesSubdomains

6. 登录与创建应用

$ pushy

loginemail: <输入你的注册邮箱>

password: <输入你的密码>

创建应用

$ pushy createApp --platform ios

App Name: <输入应用名字>

7. 添加热更新

导入认证key，检查更新时必须提供你的appKey，这个值保存在update.json中

import {

	Platform,

} from 'react-native';

import _updateConfig from './update.json';

const {appKey} = _updateConfig[Platform.OS];

检查更新，下载更新

checkUpdate = () => {

	checkUpdate(appKey).then(info => {

		if (info.expired) {

			Alert.alert('提示', '您的应用版本已更新,请前往应用商店下载新的版本', [

				{text: '确定', onPress: ()=>{info.downloadUrl && Linking.openURL(info.downloadUrl)}},

			]);

		} else if (info.upToDate) {

			Alert.alert('提示', '您的应用版本已是最新.');

		} else {

			Alert.alert('提示', '检查到新的版本'+info.name+',是否下载?\n'+ info.description, [

				{text: '是', onPress: ()=>{this.doUpdate(info)}},

				{text: '否',},

			]);

		}

	}).catch(err => {

		Alert.alert('提示', '更新失败.' + err);

	});

};

8. 发布iOS应用

打包ipa文件，并把文件放到PushyDemo的根目录
上传ipa，以供后续版本对比只用

	$ pushy uploadIpa PushyDemo.ipa

	Uploading [==================================================================] 100% 0.0s

	Ipa uploaded: 2362

	GandalfdeiMac:PushyDemo gandalf$ pushy bundle --platform ios

	Bundling with React Native version: 0.34.0

	[2016-09-27 14:21:58] Building Dependency Graph

	编译信息......(略)

	[2016-09-27 14:22:25] Building Dependency Graph (26748ms)

	transformed 368/368 (100%)

	[2016-09-27 14:22:32] Finding dependencies (28763ms)

	bundle: start

	bundle: finish

	bundle: Writing bundle output to: /Users/gandalf/Documents/kelvin/Github/HotUpdate/PushyDemo/build/intermedia/ios/index.bundlejs

	bundle: Copying 5 asset files

	bundle: Done writing bundle output

	bundle: Done copying assets

	Packing

	Bundled saved to: build/output/ios.1474957297204.ppk

	Would you like to publish it?(Y/N) Y

	Uploading [==================================================================] 100% 0.0s

	Enter version name: 1.1.0

	Enter description: change upgrade description

	Enter meta info: {"ok": 1}

	Version published: 5244

	Would you like to bind packages to this version?(Y/N) Y

	2362) 1.0(normal) (newest)

	Total 1 packages.

	Enter packageId: 2362

	OK.

随后你可以选择往AppStore发布这个版本，也可以先通过Test flight等方法进行测试，或者你可以把ipa包通过iTunes安装到手机进行后续测试。

9. 发布热更新版本

修改代码后，打包新的版本

	$ pushy bundle --platform ios

	Bundling with React Native version: 0.34.0

	[2016-09-27 14:33:39] Building Dependency Graph

	编译信息......(略)

	[2016-09-27 14:33:51] Building Dependency Graph (12461ms)

	transformed 369/369 (100%)

	[2016-09-27 14:33:54] Finding dependencies (10696ms)

	bundle: start

	bundle: finish

	bundle: Writing bundle output to: /Users/gandalf/Documents/kelvin/Github/HotUpdate/PushyDemo/build/intermedia/ios/index.bundlejs

	bundle: Done writing bundle output

	bundle: Copying 6 asset files

	bundle: Done copying assets

	Packing

	Bundled saved to: build/output/ios.1474958010480.ppk

	Would you like to publish it?(Y/N) Y

	Uploading [==================================================================] 100% 0.0s

	Enter version name: 1.2.0

	Enter description: add image

	Enter meta info: {"ok": 1}

	Version published: 5247

	Would you like to bind packages to this version?(Y/N) Y

	2362) 1.0(normal) - 5244 Fv97KfnZ 1.1.0

	Total 1 packages.

	Enter packageId: 2362

	Ok.

10. 点击客户端的刷新按钮，即可看到有更新版本的提示

到此，已经完成了植入代码热更新的全部工作。

参考资料如下

https://github.com/reactnativecn/react-native-pushy/

秒客网