首页 > 其他分享 >高仿京东Android App,集成React-Native热更

高仿京东Android App,集成React-Native热更

时间:2022-12-16 20:02:36浏览次数:71  
标签:App React UI 高仿 MVI Intent Model Android View


简介

本项目是一个学习类型的项目,主要是为了学习一些Android最新的思路和开发思想,工程按照模块化、组件化的开发思路进行开发,项目整体结构如下图。

高仿京东Android App,集成React-Native热更_react.js

项目代码整洁规范,结构清晰,使用Android最新的开发思想和技术,同时集成React-Native跨平台,主要是为了实验热更功能,涉及到的技术有如下一些:

  1. 使用kotlin语言开发,项目使用模块化开发,降低了耦合性;
  2. 网络使用 retrofit2 + okhttp3方式,进行了高度的封装;
  3. ​leakcanary 内存泄漏检测​
  4. ​基于MVI架构airbnb的Mavericks​
  5. ​本地mock​
  6. ​alibaba ARouter​
  7. 集成RN热更功能, 用户需要打开rn加载页面,​​rn工程请见​

部分效果如下:

高仿京东Android App,集成React-Native热更_android_02


高仿京东Android App,集成React-Native热更_Android_03


高仿京东Android App,集成React-Native热更_UI_04

MVI架构

高仿京东Android App,集成React-Native热更_Android_05


由于没有明确的状态管理标准,随着应用程序的增长或添加功能或事先没有计划的功能,视图渲染和业务逻辑可能会变得有点混乱,并且这种情况经常发生在Android应用开发过程中。可能你经常遇到状态管理导致业务逻辑和 UI 渲染的分工不明确,最终导致应用架构的混乱。而新提出的MVI架构,提倡一种单向数据流的设计思想,非常适合数据驱动型的UI展示项目。MVI的架构思想来源于前端,由于Model、View和Intent三部分组成。

  • Model:与其他MVVM中的Model不同的是,MVI的Model主要指UI状态(State)。当前界面展示的内容无非就是UI状态的一个快照:例如数据加载过程、控件位置等都是一种UI状态
  • View:与其他MVX中的View一致,可能是一个Activity、Fragment或者任意UI承载单元。MVI中的View通过订阅Intent的变化实现界面刷新(不是Activity的Intent、后面介绍)
  • Intent:此Intent不是Activity的Intent,用户的任何操作都被包装成Intent后发送给Model进行数据请求

用到的第三方库


功能

retrofit2

网络

okHttp3

网络

mavericks

MVI框架

BaseRecyclerViewAdapterHelper

万能适配器

PhotoView

图片预览

ARouter

组件化路由

coil

图片加载

XPopup

弹窗组件

banner

滚动图

SmartRefreshLayout

智能下拉刷新框架

gson

json解析

leakcanary

内存泄漏检测库


标签:App,React,UI,高仿,MVI,Intent,Model,Android,View
From: https://blog.51cto.com/u_13657808/5948309

相关文章