React Native热更新(CodePush使用)

Posted zk1316

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native热更新(CodePush使用)相关的知识,希望对你有一定的参考价值。

                                     React Native热更新(CodePush使用)

  在移动应用开发过程中,应用的发布上线一直是个耗时且长时间没有很好解决的问题。特别是对于苹果开发者,受苹果的生态环境影响每次审核时间一到7天不等。笔者记得15年曾有新应用上线多次被拒,从提交审核到正式上线前前后后磨蹭了半个多月才真正发布成功。安卓的相对就不会产生那么多不愉快,审核时间半天左右。今天笔者想向大家分享的是跨平台开发中的CodePush使用,CodePush的出现有效的解决了React Native 应用在动态更新方面耗时过长问题。

    1.CodePush简介

CodePush是微软开发的云服务器。通过它开发者可以直接在用户的设备上部署手机应用更新。CodePush 作为一个中央仓库,开发者可以推送更新 (JS, html, CSS and images),应用可以从客户端 SDK 里面查询更新。CodePush 可以让应用有更多的可确定性,也可以让你直接接触用户群。在修复一些小问题和添加新特性的时候,不需要经过二进制打包,可以直接推送代码进行实时更新。

    2.CodePush优势

CodePush可以实时推送代码的更新、直接对用户部署代码更新、支持React Native和Cordova、支持javascript文件与图片资源的更新、管理Alpha,Beta和生产环境应用。

    3.CodePush安装

        a.安装CodePush CLI,通过NodeJS-based CLI管理CodePush账号。

            1.打开苹果电脑终端,输入sudonpm install -g code-push-cli;

            2.验证是否安装成功,输入code-push -v查看版本。

 
技术分享图片
 

         b.创建codePush账号

            1.在终端输入code-push register,进入网页注册页面,注册成功后得到.

 
技术分享图片
 

得到的这个值就是你终端里需要输入的token;

             2.在终端输入得到的token,成功后得到如下反馈;

 
技术分享图片
 

             3.在终端输入code-push app add (应用名称);

             code-push相关命令:

 
技术分享图片
 

              code-push app下相关命令

 
技术分享图片
 

完成上述操作后,你的应用已经注册到codepush服务端。

            4.终端中输入code-push deployment ls (应用名称)-k,查看对应的Deployment Key;

 
技术分享图片
 

             5.终端输入code-push access-key ls;(创建时间和名字)

 
技术分享图片
 

    4.集成CodePush SDK

        1.ios集成,CodePush官方提供RNPM、CocoaPods与手动三种在iOS项目中集成CodePush的方式。

            a.React Native项目中安装codePush依赖,终端输入:npm i react-native-code-push --save

            b.react-native和react-native-code-push的构建关联,终端输入:react-native link react-native-code-push,可以选择输入对应的deployment key或者直接跳过,笔者选择输入对应发deployment key,RN项目中安卓跟iOS都需要.

            c.Xcode中的配置

            1.引入CodePush.xcodeproj,相同的方法只是你需要的CodePush.xcodeproj

 
技术分享图片
 

            2.引入CodePush SDK、libz.tbd

 
技术分享图片
 

            3.添加code-push头文件检索

 
技术分享图片
 

        4.配置deployment key

        在react-native link react-native-code-push环节我们跳过了deployment key在Xcode端的配置,在这里我们需要手动配置。

            a.在Xcode的项目导航视图中的PROJECT下选择你的项目,选择Info页签,在Configurations节点下单击+按钮,选择Duplicate“Release Configaration,输入Staging。

 
技术分享图片
 

            b.在build Settings页签中单击+按钮然后选择Add User-Defined Setting,然后输入CODEPUSH_KEY,然后填入deployment key。

 

 
技术分享图片
 

新增的CODEPUSH_KEY节点下Debug不用填,Release填入的是CodePush上Production的key值,Staging填入的是CodePush上Staging的key值:

 
技术分享图片
 

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

 
技术分享图片
 

至此,ios原生层的CodePush集成已经完成,接下来在React-native使用接入CodePush。

         2.安卓集成

              a.在项目中安装react-native-code-push插件,终端输入:npm install --save react-native-code-push;(如果你在项目中iOS已经集成可以省略)

              b.在android project中安装插件,CodePush提供了两种方式:RNPM和Manual。笔者使用RNPM,在终端输入sudo npm i -g rnpm;

 
技术分享图片
 

              c.自动在android文件中配置codePush,终端输入:rnpm link react-native-code-push;

 
技术分享图片
 

              d.查看安卓中配置;

                1.在android/app/build.gradle文件是否有apply from: "../../node_modules/react-native-code-push/android/codepush.gradle" 

                2.在/android/settings.gradle文件是否有include ‘:react-native-code-push‘ project(‘:react-native-code-push‘).projectDir = new File(rootProject.projectDir,‘../node_modules/react-native-code-push/android/app‘)

              e.配置deployment key

                1.获取项目deployment key,终端输入:code-push deployment ls (应用名称)-k

 
技术分享图片
 

                2.在MainApplication.java文件中修改deployment key

 
技术分享图片
 

            f.修改versionName(codepush要三位数字的形式),在android/app/build.gradle中有个android.defaultConfig.versionName属性

 
技术分享图片
 

至此,android原生层的CodePush集成已经完成,接下来在React-native使用接入CodePush。

      4.RN中添加对应codePush

在js中加载CodePush模块:import codePush from ‘react-native-code-push’,在componentDidMount中调用sync方法,后台请求更新codePush.sync().

 
技术分享图片
 

      5.使用CodePush进行热更新

CodePush支持两种发布更新的方式,一是code-push release-react简化方式,另一种是code-push release的复杂方式。

        a.通过code-push release-react发布更新,此方法将打包与发布合二为一,在终端输入:code-push release-react

eg.

 
技术分享图片
 
 
技术分享图片
 

        其他形式语句:code-push release-react hello-world ios  --t 1.0.0 --dev false --d Production --des“更新内容:…”--m true.(注:参数--t为二进制.ipa或者.apk安装包版本号;--dev为是否启用开发者模式(默认为false);--d是要发布更新的环境分Production与Staging(默认为Staging);--des为更新说明;--m是强制更新。)

综上最简单的codePush算是完成,后续继续完善。(亲测可以用)

以上是关于React Native热更新(CodePush使用)的主要内容,如果未能解决你的问题,请参考以下文章

React Native热更新(CodePush使用)

react native codepush之搭建自己的更新服务器

React Native之code-push的热更新(ios android)

React Native之code-push的热更新(ios android)

React Native Code Push

CodePush热更新组件详细接入教程