React Native热更新(iOS)-Pushy

React Native的出现,使的开发iOS代码出现了更便捷的方式。由于RN是使用脚本语言编写的,实现了“解释执行”的方式,而这种执行方式的修改只需替换脚步即可,不需要重新发布程序,热更新的方式极大的方便了迭代开发。
今天我们选择的热更新组件是Pushy,这是国内开发的,功能类似CodePush(CodePush在国内访问及其蛋疼,长城根本无法访问),Pushy支持增量更新,最大化的降低更新的数据量,节约流量。


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

  1. 创建react native工程

$react-native init PushyDemo

  1. 安装update工具, Pushy热更新需要update配合使用
    • RN 0.29+
      $npm install -g react-native-update-cli
  • RN 0.28及以下
    $npm install -g react-native-update-cli rnpm
  1. 在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
  1. 配置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
  1. 配置ATS

  • 从iOS9开始,苹果要求以白名单的形式在Info.plist中列出外部的非https接口,以督促开发者部署https协议。在我们的服务部署https协议之前,请在Info.plist中添加如下,其中true的类型必须是String:
<key>NSAppTransportSecurity</key>
<dict> 
    <key>NSExceptionDomains</key> 
    <dict> 
        <key>reactnative.cn</key> 
        <dict> 
            <key>NSIncludesSubdomains</key> 
            <true/> 
        </dict> 
    </dict>
</dict>
  1. 登录与创建应用

  • 登录
$ pushy 
loginemail: <输入你的注册邮箱>
password: <输入你的密码>
  • 创建应用
$ pushy createApp --platform ios
App Name: <输入应用名字>
  1. 添加热更新

  • 导入认证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);
    });
  };
  1. 发布iOS应用

  • 打包ipa文件,并把文件放到PushyDemo的根目录
  • 上传ipa,以供后续版本对比只用
    $ pushy uploadIpa <your-package.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] <START> Building Dependency Graph
    编译信息......(略)
[2016-09-27 14:22:25] <END>   Building Dependency Graph (26748ms)
transformed 368/368 (100%)
[2016-09-27 14:22:32] <END>   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安装到手机进行后续测试。
  1. 发布热更新版本

  • 修改代码后,打包新的版本
$ pushy bundle --platform ios
Bundling with React Native version:  0.34.0
[2016-09-27 14:33:39] <START> Building Dependency Graph
       编译信息......(略)
[2016-09-27 14:33:51] <END>   Building Dependency Graph (12461ms)
transformed 369/369 (100%)
[2016-09-27 14:33:54] <END>   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.
  1. 点击客户端的刷新按钮,即可看到有更新版本的提示

恭喜,你已经完成了植入代码热更新的全部工作。


参考资料如下
https://github.com/reactnativecn/react-native-pushy/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容