黄朝忆的个人博客
登录注册
网站设置
章节索引

11. 部署和打包

创建时间：2024-11-29 20:12
长度：4538
浏览：0
评论：0

React Native支持大家用React Native技术开发APP，并打包生成一个APP。在动态更新方面ReactNative只是提供了动态更新的基础，对将应用部署到哪里，如何进行动态更新并没有支持的那么完善。好在微软开发了CodePush，填补React Native 应用在动态更新方面的空白。CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。下面将向大家分享如何使用CodePush实时更新你的应用，后期会分享不采用CodePush，如何自己去实现React Native应用热更新。


CodePush简介

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

   CodePush 可以进行实时的推送代码更新:

    • 直接对用户部署代码更新
    • 管理 Alpha，Beta 和生产环境应用
    • 支持 React Native 和 Cordova
    • 支持JavaScript 文件与图片资源的更新


   CodePush开源了react-native版本，react-native-code-push托管在GitHub上


   安装与注册CodePush

       使用CodePush之前首先要安装CodePush客户端。本文以OSX10.11.5作为平台进行演示

   

   安装 CodePush CLl

       管理 CodePush 账号需要通过 NodeJS-based CLl。

       只需要在终端输入 npm   -g code-push-cli，就可以安装了!

       安装完毕后，输入 code-push -v 查看版本，如看到版本代表成功。

   

   创建一个CodePush 账号

       在终端输入code-push register，会打开如下注册页面让你选择授权账号

   

       授权通过之后，CodePush会告诉你“access key”，复制此key到终端即可完成注册

       然后终端输入 code-push login 进行登陆，登陆成功后，你的session文件将会写在 /Users/你的用户名/.code-push.config。



   code-push相关命令

code-push login 登陆
code-push logout 注销
code-push access-key ls 列出登陆的token
code-push access-key rm <accessKey>删除某个 access-key
code-push app add <appName> <os> <platform> 在账号里面添加一个新的app
code-push app remove 或者 rm 在账号里移除-个app
code-push app rename 重命名一个存在app
code-push app list 或则Is 列出账号下面的所有app


   在CodePush服务器注册app

       为了让CodePush服务器知道你的app，我们需要向它注册app:在终端输入 code-push app add<appName> <os> <platform> 即可完成注册。

code-push app add MyApp-Android android react-native
code-push app add MyApp-i0S ios react-native


   集成CodePush SDK

       Android

       下面我们通过如下步骤在Android项目中集成CodePush。

      1. 第一步:在项目中安装 react-native-code-push插件，终端进入你的项目根目录然后运行npm install --save react-native-code-push
      2. 第二步:在Android project中安装插件。

                   CodePush提供了两种方式:RNPM 和  ，本次演示所使用的是RNPM.

          3. 运行 npm i -g rnpm，来安装RNPM。

          4. 第三步: 运行 rnpm link react-native-code-push 。这条命令将会自动帮我们在anroid文件中添加好设置。

               在终端运行此命令之后，终端会提示让你输入deploymentkey，这是你只需将你的deploymentStaging key输入进去即可，如果不输入则直接单击enter跳过即可。

          5. 第四步:在 android/app/build.gradle文件里面添如下代码:

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

           然后在/android/settings.gradle中添加如下代码:

include ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, "../no

       6. 第五步: 运行 code-push deployment ls [APP_NAME] -k 获取 部署秘钥。默认的部署名是staging，所以部署秘钥(deployment key)就是 staging。


使用CodePush进行热更新

   设置更新策略

       在使用CodePush更新你的应用之前需要，先配置一下更新控制策略，即:

      • (在APP启动的时候?在设置页面添加一个检查更新按钮?)·什么时候检查更新?
      • ·什么时候可以更新，如何将更新呈现给终端用户?


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

       1.在 js中加载 CodePush模块:

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

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

           codePush.sync()


       如果可以进行更新，CodePush会在后台静默地将更新下载到本地，等待APP下一次启动的时候应用更新，以确保用户看到的是最新版本

       如果更新是强制性的，更新文件下载好之后会立即进行更新。如果你期望更及时的获得更新，可以在每次APP从后台进入前台的时候去主动的检查更新:在应用的根component的componentDidMount 中添加如下代码:

AppState.addEventListener("change"，(newstate)=>{
    newState =="active"" && codePush.sync();
});



发布更新

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

第一种方式:通过 code-push release-react 发布更新

   这种方式将打包与发布两个命令合二为一，可以说大大简化了我们的操作流程，建议大家多使用这种方式来发布更新。

    命令格式:

codefpush release-react <appName> <platform>

eg:

code-push release-react MyApp-i0s ios
code-push release-react MyApp-Android android

再来个更高级的:

code-push release-react MyApp-i0S ios --t 1.0.0 --dev false --d Production --des "1.优化操作" --m true

   其中参数-t为二进制(.ipa与apk)安装包的的版本;

       -dev为是否启用开发者模式(默认为false);

       -d是要发布更新的环境分Production与Staging(默认为Staging);

       -des为更新说明;

       -m 是强制更新

   关于 code-push release-react 更多可选的参数，可以在终端输入 code-push release-react进行查看。

   另外，我们可以通过 code-push deployment ls <appName>来查看发布详情与此次更新的安装情况。


   

  第二中方式:通过 code-push release 发布更新

   code-push release发布更新呢我们首先需要将js与图片资源进行打包成 bundle。


   生成bundle

       发布更新之前，需要先把 js打包成 bundle，如:

       第一步: 在 工程目录里面新增 bundles文件: mkdir bundles

       第二步:运行命令打包 react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试 。

       ios:

react-native bundle --platform ios --entry-file index.js --bundle-output./bundles/main.isbundle --assets-dest ./bundles --dev false

       Android :

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



评论（共0条）