在React Native中集成热更新
最近,在项目DYTT集成了热更新,简单来说,就是不用重新下载安装包即可达到更新应用的目的,也不算教程吧,这里记录一下。 1.热更新方案目前网上大概有两个比较广泛的方式,分别是
前者是由ReactNative中文网推出的代码热更新服务,后者是由微软老大哥推出的,当然不仅仅是为 综合考虑之下,选择了 2.安装code-push1.安装code-push npm install -g code-push-cli 2.注册登录账号 code-push register 这时候会自动启动浏览器打开网页并提供一个 输入之后就登录成功了。 (貌似在本机上以后都不用登录了,暂不清楚保持登录持续多久) 3.添加一个CodePush应用 code-push app add myProject android react-native 注意填写app的名称,OS( 创建完成会出现两个
这个对于我们来说其实没什么区别,只是为了方便测试,所以搞了两个环境 3.react-native应用接入code-push1.安装react-native-code-push yarn add react-native-code-push # link react-native link react-native-code-push 2.原生配置 目前只测试了 上面提到了两个 1.打开 android { ... buildTypes { debug { ... // Note: CodePush updates should not be tested in Debug mode as they are overriden by the RN packager. However,because CodePush checks for updates in all modes,we must supply a key. buildConfigField "String","CODEPUSH_KEY",‘""‘ ... } releaseStaging { ... buildConfigField "String",‘"<INSERT_STAGING_KEY>"‘//注意这里的引号 ... } release { ... buildConfigField "String",‘"<INSERT_PRODUCTION_KEY>"‘ ... } } ... } 如果遇到打包错误,可加上 修改 defaultConfig { applicationId "com.dytt" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 2 versionName "2.1.0"//默认为2位版本号 // ndk { // abiFilters "armeabi-v7a","x86" // } } release { //... matchingFallbacks = [‘release‘,‘debug‘]//加上这一句 buildConfigField "String",‘"<INSERT_PRODUCTION_KEY>"‘ //... } 2.打开 @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( ... new CodePush(BuildConfig.CODEPUSH_KEY,MainApplication.this,BuildConfig.DEBUG),// Add/change this line. ... ); } 这样就实现了 以上文档参考自https://github.com/Microsoft/react-native-code-push/blob/master/docs/multi-deployment-testing-android.md 4.客户端更新策略1.导入react-native-code-push 这里需要在应用的根组件上添加 import CodePush from "react-native-code-push"; 如果你的环境支持 @codePush(options: CodePushOptions) class MyApp extends Component<{}> {} 普通的写法 class MyApp extends Component<{}> {} MyApp = codePush(codePushOptions)(MyApp); export default MyApp; 这里的
详细的配置可参考https://github.com/Microsoft/react-native-code-push/blob/master/docs/api-js.md 2.更新策略 默认情况下, 这种更新方式是静默的,用户根本察觉不到。 如果我们需要给一点更新提示,可以使用默认的弹出框,也就是 class MyApp extends Component {} MyApp = codePush({ updateDialog: true,installMode: codePush.InstallMode.IMMEDIATE })(MyApp); 当然,你可以对弹出框做少量的自定义,比如标题,按钮的文字等 updateDialog: { optionalIgnoreButtonLabel: ‘稍后‘,optionalInstallButtonLabel: ‘立即更新‘,optionalUpdateMessage: ‘有新版本了,是否更新?‘,title: ‘更新提示‘ }, 这些是默认的更新方式,那么如何自定义呢。 我们可以用到 const RemotePackage = await CodePush.checkForUpdate(deploymentKey); if(RemotePackage){ this.modal.init(RemotePackage);//打开弹窗 } 这里需要注意的是,在 然后可以通过 install = async () => { LayoutAnimation.easeInEaSEOut(); this.setState({status:1})//download const LocalPackage = await this.RemotePackage.download((progress)=>{ this.setState({ receivedBytes:progress.receivedBytes }) Animated.timing( this.width,{ toValue: parseFloat(progress.receivedBytes / progress.totalBytes).toFixed(2),duration: 150 } ).start(); }) this.setState({status:2})//downloadComplete await LocalPackage.install(LocalPackage.isMandatory?CodePush.InstallMode.IMMEDIATE:CodePush.InstallMode.ON_NEXT_RESUME); if(!LocalPackage.isMandatory){ this.setState({status:3}) this.setVisible(false); }else{ ToastAndroid && ToastAndroid.show(‘下次启动完成更新‘,ToastAndroid.SHORT); } } 具体实现可以参考项目DYTT 3.打包Release cd android # 生成Release(Production)包 gradlew assembleRelease # 生成Release(Staging)包 gradlew assembleReleaseStaging 其实都一样,只是环境区别 5.发布code-push更新这一步很简单,集成了打包和发布 code-push release-react dyttAndroid android --t 2.1.0 --dev false --d Production --des "1.修复了已知BUGn 2.测试code push" --m true 这里注意 1.2.3 仅仅只有1.2.3的版本 * 所有版本 1.2.x 主要版本1,次要版本2的任何修补程序版本 1.2.3 - 1.2.7 1.2.3版本到1.2.7版本 >=1.2.3 <1.2.7 大于等于1.2.3版本小于1.2.7的版本 ~1.2.3 大于等于1.2.3版本小于1.3.0的版本 ^1.2.3 大于等于1.2.3版本小于2.0.0的版本
当然还有很多操作,比如删除某些更新,回滚等,可以参考官方文档https://github.com/Microsoft/react-native-code-push 小节总的来说,这次热更新集成还是挺容易,里面碰到的几个误区在上面也已经提到过,欢迎大家多多关注我的项目DYTT^^ 原文地址:https://segmentfault.com/a/1190000017856985 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |