利用CodePush对react-native项目热更新(以android为例)

  • Z时代
  • 2024-01-10
  • 分类：综合

react

CodePush是提供给React native 或 Cordova开发的一个中央仓库，开发者可以将js、image等代码资源上传上去，客户端启动的时候根据版本拉去CodePush上的代码进行覆盖来实现客户端的热更新。


1,安装CodePush

npm install -g code-push-cli

 



安装成功显示目录:




2,注册code_push账号:

code-push register 

 提示输入key，并弹出网页





在这里我选择关联github账户



拿到key输入并提示登录code_push成功



相关命令

code-push login 登陆     


code-push logout 注销  (注销后会删除本地保存的session,再次登录会进网页重新生成key)


列出登陆的token

code-push access-key rm <accessKye> 删除某个 key值


添加删除App命令:


code-push app add 添加一个app

code-push app remove 在账号中移除一个app

code-push app rename 重命名一个已存在的app

code-push app list ls  列出账号下面所有的app

code-push app transfer 把app的所有权转移到另外的账户


添加一个app

code-push app add MyApp-Android




下面我们创建一个react-native项目并完成code-push配置

首先创建项目

react-native init TestPush 创建完成进入TestPush根目录

然后安装code-push插件

npm install --save react-native-code-push





安装rnpm 执行命令  npm i -g rnpm 

然后再链接插件

rnpm link react-native-code-push  这条命令将会自动帮我们在anroid文件中添加好设置。

包括如下配置{ 

在app的build.gradle中会自动添加

applyfrom:"../../node_modules/react-native-code-push/android/codepush.gradle” 

compile project(':react-native-code-push’)

在app 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’)

}


接着运行code-push deployment ls MyApp-Android -k 获取密匙




打开android中MainApplication文件添加 CodePush配置

这里如果没用as编译器，CodePush是没有自动import的

需要手动import com.microsoft.codepush.react.CodePush; 


接着把android版本号改为1.0.0, code-push必须用三位数的版本号


到此为止，配置已经完成了.


下面我们利用code-push做热更新.

首先在js中引入code-push


最简单的方式是在根component中进行上述策略控制。


  1. 在 js中加载 CodePush模块：

    import codePush from 'react-native-code-push'

    2.在 componentDidMount中调用 sync方法，后台请求更新

    codePush.sync()


接着我们运行android项目

react-native run-android   


手机上会显示welcome


我们随便修改一下



在项目目录下建一个bundles文件夹  mkdir bundles 

打包js文件


react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev true




用code-push发布更新

code-push release MyApp-Android ./bundles/index.android.bundle 1.0.0 --description "初次更新" --mandatory true

之前我已经上传过一份了所以上传重复的会出错。第一次上传肯定ok的。


设置手机不通过本机服务器或许js文件.打开dev-setting — debugging — 点开debug server host &port for device  随便输入一串字符，不让它获取本机js服务器代码


然后手机会从code-push服务器拉取更新，测试成功，更新结果如下: 

后续我将自建code-push服务器做热更新。



以上是 利用CodePush对react-native项目热更新(以android为例) 的全部内容， 来源链接： utcz.com/z/382081.html

回到顶部