加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React Native架构设计

发布时间:2020-12-15 04:52:42 所属栏目:百科 来源:网络整理
导读:1:设计、开发一个基于 Canvas 的 UI 框架系统,由于系统相对比较复杂,需接管浏览器构建的整个过程: 2: 布局系统 css layout. UI 组件基于「文本」与「图像」。但 framework,除了 UI 组件本身以外,还需要有 Layout,而 css 只适用于浏览器本身的 layout



1:设计、开发一个基于 Canvas 的 UI 框架系统,由于系统相对比较复杂,需接管浏览器构建的整个过程:



2:布局系统 css layout.

UI 组件基于「文本」与「图像」。但 framework,除了 UI 组件本身以外,还需要有 Layout,而 css 只适用于浏览器本身的 layout 而无法适用于 Canvas 画布。

要给开发者好且排版可控的方案,那就要开发一个用 JavaScript 实现类似 CSS 的布局子集的框架。
否则 UI 的组件在画布上没有 layout 就无意义。

这个布局框架实现成本(简单实现)理论上并不大,大的是在于未来增加新 Feature 并相互组合时与浏览器本身有差异,需要有完整的 unit test。
正好最近 facebook 也开源了一个用 JavaScript 写 css layout 子集的解决方案,实现了:

  • padding
  • width
  • margin
  • border
  • flex
  • position( relative/absolute )

等等。

github 地址: facebook/css-layout · GitHub
这些 css 布局子集基本能满足我们前期开发预期。


3:开发框架.
用 css-layout 再加上 UI 管理层,就可以比较清晰的实现出 canvas 的 UI 组件框架了。
那么,剩下的事就是:

  • 应用开发框架的选择,如:选择 React/MVC 框架。
  • 模拟 DOM 层次,即图层管理ViewManger
  • (编辑:李大同)

    【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

      推荐文章
        热点阅读