热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

ReactNative实现热更新并自动签名打包功能

这篇文章主要介绍了ReactNative实现热更新并自动签名打包,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

项目背景:手动link的安卓App

1.下载 react-native-code-push

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

2.在android/settings.gradle文件下新增:

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

3.在android\app\src\main\java\com\app\MainApplication.java 文件中修改

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
 
public class MainApplication extends Application implements ReactApplication {
 
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    ...
 
    // 2. Override the getJSBundleFile method in order to let
    // the CodePush runtime determine where to get the JS
    // bundle location from on each app start
    @Override
    protected String getJSBundleFile() {
      return CodePush.getJSBundleFile();
    }
  //手动link需要修改的地方,自动link应该不需要改
      @Override
  protected List getPackages() {
   @SuppressWarnings("UnnecessaryLocalVariable")
   List packages = new PackageList(this).getPackages();
   // Packages that cannot be autolinked yet can be added manually here, for
   // example:
   // packages.add(new MyReactNativePackage());
   packages.add(new CodePush(getResources().getString(R.string.CodePushDeploymentKey),
     getApplicationContext(), BuildConfig.DEBUG,
     getResources().getString(R.string.reactNativeCodePush_androidServerURL)));
   return packages;
  }
  };
}
 
//CodePushDeploymentKey对应string.xml里面的 Deployment key的name
//reactNativeCodePush_androidServerURL对应string.xml里面热更新服务地址的name

4.string.xml的修改:首先要将你的app添加到推送中心,并获取你需要的环境分支的key

 4.1.登录热更新服务器  

 4.2.推送中心创建项目:(针对第一次部署)

         code-push app add 项目名称 android react-native

4.3 添加环境分支dev:code-push deployment add 项目名称 dev (针对第一次部署)

将项目打包至对应的环境分支,需要将环境分支对应的key和热更新地址配置到项目文件中:(strings.xml)

4.4 准备工作已经做好了,现在我们来修改string.xml文件吧

...
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...
 
dependencies {
  implementation project(':react-native-code-push') //最好手动加上,否则可能会有坑
  implementation fileTree(dir: "libs", include: ["*.jar"])
  ....
}
....

5.修改android/app/build.gradle文件

 STACK TRACE AND/OR SCREENSHOTS
 
:app:compileDebugJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.).
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\MainApplication.java:6: error: package com.microsoft.codepush.react does not exist
import com.microsoft.codepush.react.CodePush;
                  ^
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\MainApplication.java:23: error: cannot find symbol
    return CodePush.getJSBundleFile();
        ^
 symbol: variable CodePush
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\MainApplication.java:35: error: cannot find symbol
      new CodePush(null, getApplicationContext(), BuildConfig.DEBUG),
        ^
 symbol: class CodePush
3 errors
:app:compileDebugJavaWithJavac FAILED
 
FAILURE: Build failed with an exception.
 
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

采坑:react-native-code-push需要手动添加依赖,否则会报错:

  STACK TRACE AND/OR SCREENSHOTS
 
:app:compileDebugJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.).
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\MainApplication.java:6: error: package com.microsoft.codepush.react does not exist
import com.microsoft.codepush.react.CodePush;
                                   ^
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\MainApplication.java:23: error: cannot find symbol
        return CodePush.getJSBundleFile();
               ^
  symbol: variable CodePush
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\MainApplication.java:35: error: cannot find symbol
            new CodePush(null, getApplicationContext(), BuildConfig.DEBUG),
                ^
  symbol: class CodePush
3 errors
:app:compileDebugJavaWithJavac FAILED
 
FAILURE: Build failed with an exception.
 
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

6.采坑:手动link react-native-code-push的app,需要禁止autolink,否则会报错:

java.lang.IllegalStateException: Native module CodePush tried to override CodePushNativeModule. Check the getPackages() method in MainApplication.java, it might be that module is being created twice. If this was your intention, set canOverrideExistingModule=true

所以需要加上一个配置文件,禁止自动link

在项目根目录创建react-native.config.js文件

module.exports = {
  dependencies: {
    'react-native-code-push': {
      platforms: {
        android: null, // disable Android platform, other platforms will still autolink
      },
    },
  },
};

7.热更新配置完成,现在我们需要在项目启动的时候检测热更新,并提示

在项目入口文件App.js中:

import React,{ Component } from 'react';
import Root from './src/inner';
import configureStore from './src/inner/store';
import UpdateDialog from './src/common/components/updateDialog'
import CodePush from "react-native-code-push";
 
const { persistor, store } = configureStore();
 
 
class App extends Component {
 
 state = {
 
  visitDialog: false,
  current: 0,
  total: 100
 }
 
 
 
 componentDidMount() {
  CodePush.sync({
   //安装模式
   //ON_NEXT_RESUME 下次恢复到前台时
   //ON_NEXT_RESTART 下一次重启时
   //IMMEDIATE 马上更新
   installMode: CodePush.InstallMode.IMMEDIATE,
   //对话框
   updateDialog: {
    //是否显示更新描述
    appendReleaseDescription: true,
    //更新描述的前缀。 默认为"Description"
    descriptionPrefix: "更新内容:",
    //强制更新按钮文字,默认为continue
    mandatoryContinueButtonLabel: "立即更新",
    //强制更新时的信息. 默认为"An update is available that must be installed."
    mandatoryUpdateMessage: "必须更新后才能使用",
    //非强制更新时,按钮文字,默认为"ignore"
    optionalIgnoreButtonLabel: '稍后',
    //非强制更新时,确认按钮文字. 默认为"Install"
    optionalInstallButtonLabel: '后台更新',
    //非强制更新时,检查到更新的消息文本
    optionalUpdateMessage: '有新版本了,是否更新?',
    //Alert窗口的标题
    title: '更新提示'
   },
  },
   (status) => {
    console.log(status, 'status')
    if (status == 7) {
     this.setState({ visitDialog: true })
    }
   },
   (progress) => {
    let receivedBytes = progress.receivedBytes / 1024 / 1024;
    let totalBytes = progress.totalBytes / 1024 / 1024;
    this.setState({
     current: receivedBytes,
     total: totalBytes
    })
    if (receivedBytes === totalBytes) {
     setTimeout(() => {
      this.setState({ visitDialog: false })
     }, 1000)
    }
    console.log(progress, 'progress')
   }
  );
 }
 
 render() {
  console.log(this.state.visitDialog, 'visitDialog');
  return (
   <>
    
    {this.state.visitDialog && }
   
  )
 }
};
 
let codePushOptiOns= {
 //设置检查更新的频率
 //ON_APP_RESUME APP恢复到前台的时候
 //ON_APP_START APP开启的时候
 //MANUAL 手动检查
 checkFrequency: CodePush.CheckFrequency.ON_APP_START
};
 
export default CodePush(codePushOptions)(App);

UpdateDialog :是我自己封装的热更新下载进度条的组件,下载提示,可根据自己的心情随便写,这里我就不贴自己的代码了!(写的不好,不好意思)

现在我们热更新配置好了,打包正式的apk吧!

1. 生成签名文件:在项目根目录下运行命令:

keytool -genkey -v -keystore 我的签名-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias 我的签名

2.将生成的签名文件拷贝至目录:android/app目录下

3.配置gradle.properties

android.useAndroidX=true
android.enableJetifier=true
MYAPP_RELEASE_STORE_FILE=wms-app-key.jks //生成的签名密钥
MYAPP_RELEASE_KEY_ALIAS=ydh //别名
MYAPP_RELEASE_STORE_PASSWORD=签名时设置的密码
MYAPP_RELEASE_KEY_PASSWORD=签名时设置的密码

4.修改android/app/build.gradle

  signingConfigs {
    debug {
      ...
    }
 
    release {
      if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
        storeFile file(MYAPP_RELEASE_STORE_FILE)
        storePassword MYAPP_RELEASE_STORE_PASSWORD
        keyAlias MYAPP_RELEASE_KEY_ALIAS
        keyPassword MYAPP_RELEASE_KEY_PASSWORD
      }
    }
  }

 5..打包(android目录下): .\gradlew.bat assembleRelease 

app打包成功,将apk拷贝到手机安装即可

6..推送代码:(需要更新时,推送代码到你想要更新的环境分支)

推送到dev环境:code-push release-react 项目名称 android -d dev

推送到production环境:-m true 代表强制更新,不加代表不强制更新

code-push release-react 项目名称 android -d Production -m true

然后重启app,就可以看到更新提示啦

总结

到此这篇关于React Native 实现热更新并自动签名打包的文章就介绍到这了,更多相关React Native签名打包内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!


推荐阅读
  • 必须先赞下国人npm库作品:node-images(https:github.comzhangyuanweinode-images),封装了跨平台的C++逻辑,形成nodejsAP ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断,可以实现根据条件改变背景颜色的效果。同时,还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 本文是关于自学Android的笔记,包括查看类的源码的方法,活动注册的必要性以及布局练习的重要性。通过学习本文,读者可以了解到在自学Android过程中的一些关键点和注意事项。 ... [详细]
  • 本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤,包括安装必要的工具和驱动,测试mssql的连接,配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值,实现对mssql的监控。详细的操作步骤和代码请参考附件。 ... [详细]
  • 网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
  • iOS超签签名服务器搭建及其优劣势
    本文介绍了搭建iOS超签签名服务器的原因和优势,包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势,即一个证书只能安装100个,成本较高。文章还详细介绍了超签的实现原理,包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后,还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]
  • 本文介绍了在Mac上安装Xamarin并使用Windows上的VS开发iOS app的方法,包括所需的安装环境和软件,以及使用Xamarin.iOS进行开发的步骤。通过这种方法,即使没有Mac或者安装苹果系统,程序员们也能轻松开发iOS app。 ... [详细]
  • 本文讨论了如何使用Web.Config进行自定义配置节的配置转换。作者提到,他将msbuild设置为详细模式,但转换却忽略了带有替换转换的自定义部分的存在。 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
author-avatar
t53457078
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有