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算是完成,后续继续完善。(亲测可以用)

原文地址:https://www.cnblogs.com/ZK1316/p/9889024.html

时间: 2024-10-03 22:40:15

React Native热更新(CodePush使用)的相关文章

react native 热更新教程 react-native-pushy

 react-native-pushy 热更新 是由中文网推出的 中文网维护  还是支持国内的吧  过程中如果终端不小心关闭了 请 打开终端 cd 命令到你的项目文件夹  然后继续下一步 ! android 环境按照react native 中文网搭建完成之后  是没有NDK的  要自己去下载  推荐使用 r10e 百度网盘 下载  https://pan.baidu.com/s/1PoqMBV1OKyydOXYc_GzrZA  没有提取密码 版本 并且设置环境变量 并设置环境变量ANDROID

react native 热更新

-------------------热更新----------------------------------------------- 是热更新还是打新的包给后台进行重新下载 // 获取后台的版本号,如果本地的版本号大于后台的版本号就下载新包,否则就是热更新getNowAppVersion().then(res => { console.log(res,'ressss-----') console.log(res,deviceJSON.version,'chanage version ')

react native ios版本热更新

react native 热更新的好处 js脚本代码改变了,比如对ui进行了一些修改,客户端要是想更新的话,如果直接下载apk 或者ipa,一个是浪费流量,还有比较麻烦 热更新只要下载打包好的bundle 文件,然后进行替换就可以了 思路比较简单,客户端跟服务端都维持 一个bundle版本信息,如果服务端的版本比客户端的 版本新就下载,然后替换掉 重新渲染就OK了 具体实现,如果没有 热更新,载入bundle的代码是这样的 jsCodeLocation = [[RCTBundleURLProvi

react-native热更新之CodePush详细介绍及使用方法

react-native热更新之CodePush详细介绍及使用方法 2018年03月04日 17:03:21 clf_programing 阅读数:7979 标签: react native热更新code pushJSRN更多 个人分类: react native React Native应用部署/热更新-CodePush最新集成总结 React Native应用部署/热更新-CodePush最新集成总结(新) 本文出自<React Native学习笔记>系列文章.了解更多,可以关注我的Git

东方耀 手把手教React Native实战开发视频教程+源码笔记全集

课程序号标题 第0课0.手把手教React Native实战之开山篇_视频 第1课1.手把手教React Native实战之环境搭建_视频_Windows环境 第1课1.手把手教React Native实战之环境搭建[Mac真机]同时调试开发Android&IOS 第2课2.手把手教React Native实战之从React到RN 第3课3.手把手教React Native实战之flexbox布局(RN基础) 第4讲4.手把手教React Native实战之flexbox布局(伸缩属性) 第5讲

RN 热更新

React Native会将一系列资源打包成js bundle文件,系统加载js bundle文件,解析并渲染. 所以,React Native热更新的根本原理就是更换js bundle文件,并重新加载 差量热更新: https://blog.csdn.net/u013718120/article/details/55096393 https://blog.csdn.net/szy406469533/article/details/75663722 热更新(Pushy) https://blog

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

React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React Native只是提供了动态更新的基础,对将应用部署到哪里,如何进行动态更新并没有支持的那么完善.好在微软开发了CodePush,填补React Native 应用在动态更新方面的空白.CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务.下面将向大

RN学习1——前奏,app插件化和热更新的探索

react_native_banner-min.png React Native(以下简称RN)有大量前端开发者的追捧.前端开发是一个活跃的社区,一直尝试着一统前后端,做一个全栈开发,RN就是他们在客户端领域的尝试. 说是从零开始,但其实我还是懂一点点JS代码的,而且算是一个有经验的iOS.Android开发,对很多js和native交互的细节和特性还算了解,在QDaily里面也做过好多hybird的尝试,还经常用JSPatch做hotfix,总的来说,就是对hot update.插件化以及hy

React Native实践之携程Moles框架

编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试.但有一个痛点是,在移动端,我们是否有必要开发多套程序:iOS.Android和H5?本次将通过对Moles框架的分享,介绍携程在React Native方面的实战干货,希望给大家一些灵感和启发.