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/
来源:https://www.cnblogs.com/fishbay/p/7198782.html