RN - codePush热更新 - IOS&RN配置

codePush 安装

安装codePush CLI

安装CodePush指令,直接在终端上输入如下命令即可,注意:这个CodePush指令只需要全局安装一次即可,如果第一次安装成功了,那后面就不在需要安装

npm install -g code-push-cli

注册 CodePush账号

code-push register

注意:当执行完上面的命令后,会自动打开一个授权网页,让你选择使用哪种方式进行授权登录 推荐使用gitHub
注册成功后会有一个key
把这个KEY在终端填写进去即可。可用登录命令验证是否登录成功
CodePush注册登录相关命令:
code-push login 登陆
code-push loout 注销
code-push access-key ls 列出登陆的token
code-push access-key rm <accessKye> 删除某个 access-key

在CodePush服务器注册App

code-push app add  <appName> <platform> react-native
//例子:code-push app add CodePushDemo ios react-native

CodePush管理App的相关命令:
code-push app add 在账号里面添加一个新的app
code-push app remove 或者 rm 在账号里移除一个app
code-push app rename 重命名一个存在app
code-push app list 或则 ls 列出账号下面的所有app
code-push app transfer 把app的所有权转移到另外一个账号

创建成功后会有Staging&Production 两个KEY 这两个KEY很重要 原生集成CodePush 需要使用到。

后面如果忘记可输入以下命令插看:
code-push deployment ls <appName> -k

RN集成codePush

安装第三方库 codepush
npm install react-native-code-push --save
连接 codepush
react-native link react-native-code-push

在app.js里面替换以下代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';

import CodePush from "react-native-code-push"; //引入code-push

let codePushOptions = {
    //设置检查更新的频率
    //ON_APP_RESUME APP恢复到前台的时候
    //ON_APP_START APP开启的时候
    //MANUAL 手动检查
    checkFrequency : CodePush.CheckFrequency.ON_APP_START
};

const instructions = Platform.select({
    ios: '现在是5.16 15:40分',
    android: 'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
});

class App extends Component  {

    //如果有更新的提示
    syncImmediate() {
        CodePush.sync( {
                //安装模式
                //ON_NEXT_RESUME 下次恢复到前台时
                //ON_NEXT_RESTART 下一次重启时
                //IMMEDIATE 马上更新
                installMode : CodePush.InstallMode.IMMEDIATE ,
                //对话框
                updateDialog : {
                    //是否显示更新描述
                    appendReleaseDescription : true ,
                    //更新描述的前缀。 默认为"Description"
                    descriptionPrefix : "更新内容:" ,
                    //强制更新按钮文字,默认为continue
                    mandatoryContinueButtonLabel : "立即更新" ,
                    //强制更新时的信息. 默认为"An update is available that must be installed."
                    mandatoryUpdateMessage : "必须更新后才能使用" ,
                    //非强制更新时,按钮文字,默认为"ignore"
                    optionalIgnoreButtonLabel : '稍后' ,
                    //非强制更新时,确认按钮文字. 默认为"Install"
                    optionalInstallButtonLabel : '后台更新' ,
                    //非强制更新时,检查到更新的消息文本
                    optionalUpdateMessage : '有新版本了,是否更新?' ,
                    //Alert窗口的标题
                    title : '更新提示'
                } ,
            } ,
        );
    }

    componentWillMount() {
        CodePush.disallowRestart();//页禁止重启
        this.syncImmediate(); //开始检查更新
    }

    componentDidMount() {
        CodePush.allowRestart();//在加载完了,允许重启
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit App.js
                </Text>
                <Text style={styles.instructions}>
                    {instructions}
                </Text>

                <Text style={styles.instructions}>
                    这是更新的版本
                </Text>
            </View>
        );
    }
}

//这一行是必须的
App = CodePush( codePushOptions )( App );
export default App;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

到此 RN 已经 集成成功codepush

IOS集成codePush

使用Xcode打开项目,Xcode的项目导航视图中的PROJECT下选择你的项目,选择Info页签 ,在Configurations节点下单击 + 按钮 ,选择Duplicate "Release Configaration,输入Staging


6342050-fbfc9b79199d4a3f..jpg.png

选择Build Settings tab,搜索Build Location -> Per-configuration Build Products Path -> Staging,
将之前的值:

值:$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 
改为:$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)
6342050-369c31244b0f528f..jpg.png

选择Build Settings tab,点击 + 号,选择Add User-Defined Setting,将key设置为CODEPUSH_KEY。
特别注意: Release 和 Staging的值为前面CodePush创建项目时显示的查询Production跟StagingKey

6342050-663dc2df47438cc5..jpg.png

打开Info.plist文件,在CodePushDeploymentKey中输入$(CODEPUSH_KEY),并修改Bundle versions为三位1.0.0


6342050-c4392091edc647a0..jpg.png

在cocoaPod 里面添加:

pod 'CodePush', :path => '../node_modules/react-native-code-push'

获取热更新连接

#import <CodePush/CodePush.h>
jsCodeLocation= [CodePush bundleURL];
//之前是:jsCodeLocation=[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

这个时候IOS环境就集成完毕。
Staging环境为codepush热更新的测试环境 类似Xcode的debug模式。之后发布热更新典型的流程是先发在staging环境下没问题了在发布到Production环境

直接运行Staging环境会报寻找不到第三方库Base64
先运行Release环境之后会提示是否需要自动设配之前导入的第三方库。点击 是, 之后Staging环境就不会报错了。

发布热更新

非常重要:先在RN项目的根目录创建文件夹 bundle 在bundle里面在创建ios文件夹

生成main.jsbundle包:

生成bundle命令 react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试
例子:
react-native bundle --entry-file index.js --bundle-output ./bundle/ios/main.jsbundle --platform ios --assets-dest ./bundle/ios --dev false

将生成的main.jsbundle拖入ios项目中

将main.jsbundle上传到codepush服务器

code-push release-react <AppName> <Platform> --t <填写IOS项目版本号> --des <本次更新说明>
**注意:**CodePush默认是更新Staging 环境的,如果发布生产环境的更新包,需要指定--d参数:--d Production,如果发布的是强制更新包,需要加上 --m true强制更新
例子:
code-push release-react codePushDemo ios --t 1.0.0 --dev false  --des "这是第一个更新包" --m true

巨坑出现: 填写IOS项目版本号!!! 填写IOS项目版本号!!!IOS项目版本号是多少就填多少!!!!

查看上传历史记录

//查询Production
 code-push deployment history <AppName> Production
//查询Staging
 code-push deployment history <AppName> Staging 

之后版本更新 需要重新打包main.jsbundle 在将main.jsbundle发到codepush上去。

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