在React Native中集成热更新

简介: 在React Native中集成热更新

最近,在项目DYTT集成了热更新,简单来说,就是不用重新下载安装包即可达到更新应用的目的,也不算教程吧,这里记录一下。

image.png

1.热更新方案


目前网上大概有两个比较广泛的方式,分别是



前者是由ReactNative中文网推出的代码热更新服务,后者是由微软老大哥推出的,当然不仅仅是为React Native,还包括其他原生方式。


综合考虑之下,选择了react-native-code-push


2.安装code-push


1.安装code-push

npm install -g code-push-cli


2.注册登录账号

code-push register


这时候会自动启动浏览器打开网页并提供一个codePush AccessKey,然后命令行里出现需要输入access key


输入之后就登录成功了。


(貌似在本机上以后都不用登录了,暂不清楚保持登录持续多久)


3.添加一个CodePush应用

code-push app add myProject android react-native


注意填写app的名称,OS( android/ ios),平台( react-native),并且 androidios需要创建两个应用


创建完成会出现两个key


name Deployment Key
Production (一串37位的key)
Staging (一串37位的key)


Production是对应生产环境的,Staging是对应开发环境的。


这个对于我们来说其实没什么区别,只是为了方便测试,所以搞了两个环境


3.react-native应用接入code-push


1.安装react-native-code-push

yarn add react-native-code-push
# link
react-native link react-native-code-push


2.原生配置


目前只测试了androidios有兴趣的可以自行测试


上面提到了两个key值,现在需要配置在原生目录里


1.打开android/app/build.gradle

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", "CODEPUSH_KEY", '"<INSERT_STAGING_KEY>"'//注意这里的引号
            ...
        }
        release {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
            ...
        }
    }
    ...
}


如果遇到打包错误,可加上matchingFallbacks = ['release', 'debug'],不知道是不是个别情况,如果没有的请忽略。


修改versionName为3位数的版本号(code-push要求)

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", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
            //...
        }

2.打开MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        ...
        new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG), // Add/change this line.
        ...
    );
}


这样就实现了key的动态部署,即在什么环境下使用什么key


以上文档参考自https://github.com/Microsoft/react-native-code-push/blob/master/docs/multi-deployment-testing-android.md


4.客户端更新策略


1.导入react-native-code-push


这里需要在应用的根组件上添加CodePush配置

import CodePush from "react-native-code-push";


如果你的环境支持Decorator(修饰符),可以这样

@codePush(options: CodePushOptions)
class MyApp extends Component<{}> {}


普通的写法

class MyApp extends Component<{}> {}
MyApp = codePush(codePushOptions)(MyApp);
export default MyApp;


这里的codePushOptions是更新的配置选项


  • checkFrequency(codePush.CheckFrequency) 指定您要检查更新的时间,默认为codePush.CheckFrequency.ON_APP_START
  • installMode(codePush.InstallMode) 指定何时安装可选更新,默认为codePush.InstallMode.ON_NEXT_RESTART
  • ...


详细的配置可参考https://github.com/Microsoft/react-native-code-push/blob/master/docs/api-js.md


2.更新策略


默认情况下,CodePush会在app每次启动的时候去检测是否有更新,如果有,app会自动下载并在下次打开app时安装


这种更新方式是静默的,用户根本察觉不到。


如果我们需要给一点更新提示,可以使用默认的弹出框,也就是react-native自带的Alert,点击后立即安装

class MyApp extends Component {}
MyApp = codePush({
    updateDialog: true,
    installMode: codePush.InstallMode.IMMEDIATE
})(MyApp);


当然,你可以对弹出框做少量的自定义,比如标题,按钮的文字等

updateDialog: {
  optionalIgnoreButtonLabel: '稍后',
  optionalInstallButtonLabel: '立即更新',
  optionalUpdateMessage: '有新版本了,是否更新?',
  title: '更新提示'
},



这些是默认的更新方式,那么如何自定义呢。


我们可以用到CodePush.checkForUpdate来手动检查更新,然后弹出一个自定义窗口

const RemotePackage = await CodePush.checkForUpdate(deploymentKey);
if(RemotePackage){
  this.modal.init(RemotePackage);//打开弹窗
}


这里需要注意的是,在 checkForUpdate(或其他需要填写deploymentKey的地方)的时候,如果在 debug模式下,如果不填写 deploymentKey,会提示缺少 deploymentKey,我们可以临时写一个固定的方便测试。在正式环境下,这里是不需要填写,它会根据系统自动获取我们在之前配置的那些 deploymentKey


然后可以通过RemotePackage.downloadLocalPackage.install来完成下载和安装

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.修复了已知BUG\n 2.测试code push" --m true


这里注意--t 2.1.0,有以下几种规则

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的版本

--d表示开发版本,可选择Production和Staging


--m表示是否强制更新


当然还有很多操作,比如删除某些更新,回滚等,可以参考官方文档https://github.com/Microsoft/react-native-code-push


小节


总的来说,这次热更新集成还是挺容易,里面碰到的几个误区在上面也已经提到过,欢迎大家多多关注我的项目DYTT^^

相关文章
|
23天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
37 3
|
5月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
207 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
3月前
|
Dart 开发工具 Android开发
快速集成 Flutter Shorebird 热更新
Flutter Shorebird 是一种云端代码推送服务,可以让开发者在几分钟内集成,无需修改代码即可将更新推送到任何 Dart 代码,支持所有 Android 和 iOS 设备,并符合 App Store 和 Play Store 的规定。Shorebird 最大的优点是无代码侵入,快速集成,设计优秀。
129 2
快速集成 Flutter Shorebird 热更新
|
3月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
4月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
105 1
|
4月前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。
|
5月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
1556 1
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
4月前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战:从零到一
学习React Native跨平台开发,首先安装Node.js和React Native CLI,设置Android/iOS环境。使用CLI创建项目,如`npx react-native init MyProject`。运行应用:`npx react-native run-android`或`run-ios`。编写组件,如在App.js中创建Hello World。添加样式,安装第三方库如react-native-vector-icons,使用react-navigation进行路由和导航。
88 2
|
5月前
|
前端开发 JavaScript Android开发
使用React Native开发跨平台移动应用的技术详解
【5月更文挑战第22天】本文详述了使用React Native开发跨平台移动应用的技术,该框架由Facebook推出,基于JavaScript,支持iOS和Android。React Native通过JNI/JSI实现JavaScript到原生代码的转换,提供高效性能和原生体验。其优势包括跨平台性、原生体验、开发速度及社区支持。开发流程涉及环境搭建、项目创建、编码、调试与测试,以及构建与发布。注意事项包括性能优化、平台适配、利用第三方库和持续学习。React Native为开发者构建高质量跨平台应用提供了便捷途径,未来潜力无限。
|
4月前
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
57 0
下一篇
无影云桌面