美文网首页工作生活
react-native集成code-push(热更新)

react-native集成code-push(热更新)

作者: 奋斗的小蜗牛yyl | 来源:发表于2019-07-02 12:22 被阅读0次

    安装与注册CodePush

    安装CodePush CLI

    在终端输入

    npm install -g code-push-cli
    

    安装完成后输入code-push -v 查看版本号

    code-push -v
    
    image.png

    创建一个CodePush 账号

    在终端输入code-push register 浏览器会打开注册页面 选择一个品台注册成功后code-push 会给一个access key,复制,然后登录

    code-push register
    
    image.png

    在CodePush服务器注册app

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

    image.png

    注册完成之后会返回一套deployment key,该key在后面步骤中会用到。

    集成CodePush SDK

    android

    下面我们通过如下步骤在Android项目中集成CodePush。
    第一步:在项目中安装 react-native-code-push插件,终端进入你的项目根目录然后运行

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

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

    第三步: 在 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, '../node_modules/react-native-code-push/android/app')
    

    第四步: 在终端运行 code-push deployment ls <appName> -k获取 部署秘钥。


    image.png

    第五步:添加配置
    ①打开android/app/build.gradle文件,找到android { buildTypes {} }然后添加如下代码即可:

    release {
    //省略其他代码
              buildConfigField "String", "CODE_PUSH_KEY", CODE_PUSH_KEY_PRODUCTION
            }
    debug {
                buildConfigField "String", "CODE_PUSH_KEY", CODE_PUSH_KEY_STAGING
            }
    

    ②android项目下gradle.properties添加


    image.png
    CODE_PUSH_KEY_PRODUCTION="你的production_key XXXXXXXXXXXXXXXXXXXXXXXXXXXX"
    CODE_PUSH_KEY_STAGING="你的staging_key XXXXXXXXXXXXXXXXXXXXXXXX"
    

    ③更新 MainApplication.java文件

     @Override
        protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
                new CodePush(BuildConfig.CODE_PUSH_KEY, getApplicationContext(), BuildConfig.DEBUG),
          );
        }
    // 如果已经自动生成就不用添加
     @Override
      public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
      }
    

    ④修改versionName
    在 android/app/build.gradle中有个 android.defaultConfig.versionName属性,我们需要把 应用版本改成 1.0.0(默认是1.0,但是codepush需要三位数)。

    android{
        defaultConfig{
            versionName "1.0.0"
        }
    }
    

    android 集成完毕。

    使用CodePush进行热更新

    最好在项目根。component中进行上述策略控制
    引入

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

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

    componentDidMount(){
      codePush.sync({
                updateDialog:{
                    appendReleaseDescription:true,
                    descriptionPrefix:'更新内容',
                    title:'更新',
                    mandatoryUpdateMessage:'',
                    mandatoryContinueButtonLabel:'更新',
                }
            })
    }
    

    sync方法,提供了如下属性以允许你定制sync方法的默认行为

    deploymentKey (String): 部署key,指定你要查询更新的部署秘钥,默认情况下该值来自于Info.plist(Ios)和MianActivity.java(Android)文件,你可以通过设置该属性来动态查询不同部署key下的更新。
    installMode (codePush.InstallMode): 安装模式,用在向CodePush推送更新时没有设置强制更新(mandatory为true)的情况下,默认codePush.InstallMode.ON_NEXT_RESTART即下一次启动的时候安装。
    mandatoryInstallMode (codePush.InstallMode):强制更新,默认codePush.InstallMode.IMMEDIATE。
    minimumBackgroundDuration (Number):该属性用于指定app处于后台多少秒才进行重启已完成更新。默认为0。该属性只在installMode为InstallMode.ON_NEXT_RESUME情况下有效。
    updateDialog (UpdateDialogOptions) :可选的,更新的对话框,默认是null,包含以下属性
    appendReleaseDescription (Boolean) - 是否显示更新description,默认false
    descriptionPrefix (String) - 更新说明的前缀。 默认是” Description: “
    mandatoryContinueButtonLabel (String) - 强制更新的按钮文字. 默认 to “Continue”.
    mandatoryUpdateMessage (String) - 强制更新时,更新通知. Defaults to “An update is available that must be installed.”.
    optionalIgnoreButtonLabel (String) - 非强制更新时,取消按钮文字. Defaults to “Ignore”.
    optionalInstallButtonLabel (String) - 非强制更新时,确认文字. Defaults to “Install”.
    optionalUpdateMessage (String) - 非强制更新时,更新通知. Defaults to “An update is available. Would you like to install it?”.
    title (String) - 要显示的更新通知的标题. Defaults to “Update available”.

    =======================================================
    如果可以进行更新,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 <appName> <platform>

    code-push release-react aaa android
    or
    code-push release-react aaa android  --t 1.0.0 --dev false --d Production --des "更新内容" --m true
    // 其中参数–t为二进制(.ipa与apk)安装包的的版本;–dev为是否启用开发者模式(默认为false);–d是要发布更新的环境分Production与Staging(默认为Staging);–des为更新说明;–m 是强制更新。
    

    这种方式将打包与发布两个命令合二为一,可以说大大简化了我们的操作流程,建议大家多使用这种方式来发布更新。
    ②code-push release 方式(没有使用不说了_).

    图片


    image.png

    相关文章

      网友评论

        本文标题:react-native集成code-push(热更新)

        本文链接:https://www.haomeiwen.com/subject/ysvacctx.html