react native android 热更新(真机运行,打包文件,上传 )

运行环境

macOS Sierra 10.12.1

jdk 1.8.0_101

打包 apk

生成签名秘钥

keytool java证书管理工具

相关参数

-genkey //在用户目录中创建一个默认文件”.keystore”,还会产生一个mykey的别名,mykey中包含用户的公钥、私钥和证书

-alias  //产生别名 每个keystore都关联这一个独一无二的alias,这个alias通常不区分大小写

-keyalg //指定密钥的算法 (如 RSA DSA,默认值为:DSA)

-keystore   //指定密钥库的名称(产生的各类信息将不在.keystore文件中)

-validity   //指定创建的证书有效期多少天(默认 90)

终端进入工程目录输入签名命令

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

这条命令会要求你输入密钥库(keystore)和对应密钥的密码,然后设置一些发行相关的信息。最后它会生成一个叫做my-release-key.keystore的密钥库文件

sing1.jpeg

在运行上面这条语句之后,密钥库里应该已经生成了一个单独的密钥,有效期为10000天。--alias参数后面的别名是你将来为应用签名时所需要用到的,所以记得记录这个别名。

秘钥文件默认生在当前目录(mac是如此,windows不清楚)

注意:请记得妥善地保管好你的密钥库文件,不要上传到版本库或者其它的地方。

设置gradle变量

  1. my-release-key.keystore文件(根据自己命名不同)移动到工程android/app

  2. 编辑/android/gradle.properties文件,添加以下的代码

     MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
     MYAPP_RELEASE_KEY_ALIAS=my-key-alias
     MYAPP_RELEASE_STORE_PASSWORD=这里写刚才输入的密码
     MYAPP_RELEASE_KEY_PASSWORD=这里写刚才输入的密码
    

上面的这些会作为全局的gradle变量,在后面的步骤中可以用来给app签名。

一旦你在Play Store发布了你的应用,如果想修改签名,就必须用一个不同的包名来重新发布你的应用(这样也会丢失所有的下载数和评分)。所以请务必备份好你的密钥库和密码。

添加签名到项目的gradle配置文件

打开项目目录下的android/app/build.gradle文件

android 字段中添加如下代码

signingConfigs {
    release {
        storeFile file(MYAPP_RELEASE_STORE_FILE)
        storePassword MYAPP_RELEASE_STORE_PASSWORD
        keyAlias MYAPP_RELEASE_KEY_ALIAS
        keyPassword MYAPP_RELEASE_KEY_PASSWORD
    }
}   

buildTypes字段的release中添加

signingConfig signingConfigs.release

添加好后就像下面代码的样子(省略号表示还有其他的默认代码)

android {
   
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}

生成发行APK包

在项目中android目录下运行

./gradlew assembleRelease

./gradlew assembleRelease表示执行当前目录下的名为gradlew的脚本文件,运行参数为assembleRelease

最后apk文件生成在android/app/build/outputs/文件夹中,我的叫做 app-release.apk,拷贝到手机上即可安装

集成codepush到安卓项目中

参考文档1

参考文档2

参考文档3

codepush有两种方式导入,我这里选择的是rnpm的方式

安装rnpm

终端输入

npm i -g rnpm

导入配置到项目中

进入项目中 android文件夹运行命令导入配置

rnpm link react-native-code-push

修改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')

修改 android/app/build.gradle文件 (貌似也会自动添加)

...
dependencies {
    ...
    compile project(':react-native-code-push')
}

继续修改 android/app/build.gradle文件 ,添加代码(貌似还是会自动添加)

apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

查看codepush 部署秘钥,拷贝出对应环境的 key (这点很重要)

code-push deployment ls <appName> --displayKeys

修改android/app/src/java/com/工程名/MainApplication.java文件

React Native 版本 >= v0.29 添加代码如下样子(在node_modules/react-native/package.json中查看)

import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
       
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }

        @Override
        protected List<ReactPackage> getPackages() {
           it, you can run "code-push deployment ls <appName> -k" to retrieve your key.
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new CodePush("这里填上文的 key ", MainApplication.this, BuildConfig.DEBUG)
            );
        }
    };
}   

修改 android/app/build.gradle 文件 中的 versionName 改为 1.0.0(随便改成啥,但格式需要这样的,自行根据当前版本修改),因为 codepush需要三位

android{
    defaultConfig{
        versionName "1.0.0"
    }
}

编辑 android/index.android.js文件,添加codepush代码

import codePush from "react-native-code-push";

在 父组件的componentDidMount 方法中调用热更新方法

componentDidMount(){
    codePush.sync();
  }

react native 打包 bundle 文件

相关命令

react-native bundle

常用参数解释

--entry-file //ios或android入口的文件名称,一般叫 index.ios.js或 index.android.js

--platform //平台名称(ios/android)

--dev //设置为false的时候会对JavaScript代码进行优化处理。

--bundle-output //生成的jsbundle文件的名称(包含路径),比如./ios/bundle/index.ios.jsbundle

--assets-dest //图片以及其他资源存放的目录,比如./ios/assets

我的打包命令如下,我的静态资源放到 ios/Trip/assets 中的(依照个人的路径为准)

特别注意:bundle 文件夹 需要事先手动建好

react-native bundle --entry-file index.android.js --platform android --dev false --bundle-output ./android/bundle/index.android.jsbundle --assets-dest ./android/assets

此时成功会在ios目录下看到一个bundle目录,里面是我们的打包文件

向codepush发布打包代码

随意修改代码,使其表现和手机上显示不一致即可

然后重新执行打包命令,生成一个新的bundle文件

执行codepush的发布命令,将新文件发布到staging 环境中

相关命令

code-push release <appName> <updateContents> <targetBinaryVersion> --mandatory //发布

code-push deployment history Trip Staging  //查询发布历史

参数解释

<appName> //app名称

<updateContents> //Bundle文件所在目录(完整)

<targetBinaryVersion>   // 需要热更的app 版本

--mandatory //此参数非必须  如果有则表示app强制更新

我的命令如下

code-push release TripAnd ./android/bundle/index.android.jsbundle 1.0.0 

成功后重启app 则会看到更新(是重启app 需要结束程序后再打开)

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

推荐阅读更多精彩内容