react-native使用react-native-code-push实现热更新

react-native版本:0.62.2

react-native-code-push:6.3.0

在找了很多文档、资料后,实现了热更新。

接入流程

1.安装 CodePush CLI

现在code-push转移到了 微软的app-center 中
可以选择安装使用 appcenter 或 code-push , 推荐安装 appcenter

npm install appcenter -g
nom install code-push -g

2.注册 CodePush账号

CodePush终端安装完成后就可以使用code-push命令了。
在终端输入code-push register,会跳转授权网页。在这个网页可以选择Github。

image

授权完成后,CodePush会显示你的Access Key,复制输入到终端即可完成注册并登陆。
ps.只要不主动退出(通过code-push logout命令),登陆状态会一直有效。

3.在CodePush服务器注册App

先在 https://appcenter.ms/ 中注册app,react-native应用创建两个应用 android 和 IOS的

image.png

在项目根目录下 终端输入code-push app add <appName>即可完成创建,注册完成之后会返回一套deployment key,包括Staging和Production。该key在后面步骤中会用到。

4.React Native(JavaScript)端集成CodePush

在rn中集成codepush,建议看官方相关的教程:https://github.com/microsoft/react-native-code-push
使用的rn版本对应不同的配置方法,建议rn使用较新版本。
记录一下0.62版本的配置
路径:\android\app\src\main\java\com\myapp\MainApplication.java

import com.microsoft.codepush.react.CodePush;

//因为是新版本,就不需要再 getPackages() 方法中再进行引入了,
//只需要引入下方的即可
@Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }

在路径: \android\app\build.gradle 中配置多模式方法:新版本不需要其他的配置

//引入的文件
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"


buildTypes {
        debug {
            signingConfig signingConfigs.debug
            resValue "string", "app_name", "app的名字debug"
            //这里的key为Staging的key
            resValue "string", "CodePushDeploymentKey", "生成的deployment key"
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://facebook.github.io/react-native/docs/signed-apk-android.
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            resValue "string", "app_name", "app的名字"
            //这里的key为Productionde的key
            resValue "string", "CodePushDeploymentKey", "生成的Production的deployment key"
        }
        releaseStaging  {
            matchingFallbacks = ['release']
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            resValue "string", "app_name", "app的名字Staging"
            //这里的key为Staging的key
            resValue "string", "CodePushDeploymentKey", "生成的Staging的deployment key"
            // resValue "string", "CodePushServerUrl", "https://codepush.microzan.com.cn/"
        }
    }

\android\settings.gradle中配置

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

5.发布更新的版本

appcenter codepush release-react -a <ownerName>/<appName> -t 1.0.3  -d Staging -m --description  "原始版本"

// ownerName  我自己搞错了,这个命令一直执行报错,
appcenter apps list //查看所有应用 这个可以看到 ownerName
参数说明:
   -t   目标版本,如果你想让1.0.0版本的应用更新,就写为1.0.0      这个版本格式是3位的,不能少
   -d   部署名称参数 Staging /  Production
   -m  强制更新
   --description  描述

目标版本号在 \android\app\build.gradle 中有配置

defaultConfig {
        applicationId "com.myapp"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0.2"   //这个为当前版本号
        missingDimensionStrategy 'react-native-camera', 'general'
        multiDexEnabled true
        ndk {
            abiFilters  "armeabi-v7a"
        }
    }

使用命令更新后,在https://appcenter.ms/ 中就能看到更新包

codepush

之后在app中就可以接收到更新了,具体的更新代码就不描述了。
之后有了新的再更新

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