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/
React Native热更新(iOS)-Pushy的更多相关文章
- react native 热更新
一.安装codepush服务 npm install code-push-cli -gcode-push -v 二.创建codepush账号 code-push registercode-push l ...
- React Native之code-push的热更新(ios android)
React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- 如何用 React Native 创建一个iOS APP?(二)
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
- 如何用 React Native 创建一个iOS APP?
诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...
- React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton)
React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton) 一,需求与简单介绍 在开发项目时发现RN没有给提供RadioButton和Rad ...
- 封装 React Native 原生组件(iOS / Android)
封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...
- React native 之设置IOS的图标,名称和启动图(下篇文章会讲到RN的android的相关设置)
1.首先,app的名称: 如图所示:我的工程名叫BOOk 在BOOk下面的info.plist的文件里设置app的相关信息:比如Bundle name就是设置APP的名称 2.App的图标:(这里注意 ...
- React Native项目集成iOS原生模块
今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationContro ...
随机推荐
- mybatis学习笔记(一)-- 简单入门(附测试Demo详细过程)
写在最前 MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以对配置和原生M ...
- Mysql元数据分析
Mysql元数据分析 @(基础技术) 一.information_schema库 information_schema库中的表,保存的是Mysql的元数据. 官网元数据表介绍 InnoDB相关的表介绍 ...
- Unity User Group 北京站图文报道:《Unity虚拟现实实战技巧》
时间来到了盛夏,北京UUG活动也来到了第八期.本次活动的主题为<Unity虚拟现实实战技巧>,为此我们邀请了4位资深的行业大神.这次我们仍然在北京市海淀区丹棱街5号微软大厦举行活动,在这里 ...
- hightcharts在移动端运用 FastClick后苹果上legend点击失效的解决办法
问题:在移动端做图表运用了hightcharts,引用了fastclick来消除300ms的延迟,但是发现苹果(安卓正常)上hightcharts的legend点击不起作用了,必须长按才行. 使用fa ...
- git分支的使用
本文章假定你已经接触了一些git的基本概念和基本的操作知识 这里先贴出关于分支的一些常用命令 git branch /*查看所有分支*/git branch <branch-name> / ...
- SSH中的Invalid action class configuration that references an unknown class named.......
最近用SSH框架做项目的时候页面提交数据到后台,遇到了这个问题,百度了一下,网上的解决办法无非两种: 1.检查struts.xml ,applicationContext.xml的配置是否正确 2. ...
- 第一章:selenium + java 环境安装
1. 首先安装的是 jdk ,推荐安装的是 JDK 版本是 1.7 2. 安装 JDK 步骤: 第一步: 第二步: 第三步: 配置 JDK 环境变量,点击 我的电脑-右键-高级-环境变量. 第五 ...
- ServerSocket简单例题
ServerSocket 简单例题: package com.kaige123.net; /* *凯哥 */ import java.io.FileInputStream; import java.i ...
- BestCoder Round #92 (hdu_6015 6016)
比赛链接 A题主要是map的使用,比赛的时候问了下队友,下次要记住了 #include<bits/stdc++.h> using namespace std; typedef long l ...
- 内核对象kobject和sysfs(3)——kobj分析
内核对象kobject和sysfs(3)--kobj分析 在分析kobj之前,先总结下kobj的功能: 实现结构的动态管理: 实现内核对象到sysfs的映射: 实现自定义属性的管理. 关注一下kobj ...