React Native组件开发:架构设计

写在前面的话:本人前端开发一枚,最近一年主要精力集中在React Native相关的开发工作,近期希望能够结合以往的一些工作经历尝试开发实现一套具备高质量、高通用性的RN组件库,同时也借这个机会来加深对RN技术的学习和使用,在这里将组件库实现过程中的一些思考分享出来,主要也是希望能够得到业界一些资深老司机的建议。

该项目主要基于React Native(版本:0.57)技术对常用的移动端开发组件进行封装,旨在提供一套集通用性与定制化于一体的组件库,其应该包含一下基本特性:

  1. 通用型组件,业务完全解耦;
  2. 具备良好的架构设计,包括组件分层、详细设计和使用文档、UI规范、升级Change log;
  3. 良好的用户体验,如:易用性、视觉美观、平台兼容性、性能等;
  4. 良好的开发体验,如:提供常用的默认值、易扩展、支持主题配置、尽量少的调用代码等;

在结构上,将按照基础组件、工具方法、通用组件、主题定制等多个层次进行架构搭建:

- RN组件架构设计
    - UI主题定制
        - 字体规范
        - 颜色规范
        - 尺寸规范
        - 组件常量  // 所有组件私有的常量,比如按钮的圆角等
    - 基础组件
        - RootView  // 提供所有模态视图层的管理
        - ErrorBoundry  // 出现异常时显示的视图,支持试图内容的定制化
        - Icon  // 图标组件,支持常用尺寸以及点击敏感区域的配置
        - Modal // 最基础的模态视图,用于定制复杂模态视图的基础
        - UIAnimation   // 常用UI动画的封装,用于通用组件实现统一的动画效果
    - 模态视图
        - Dialog    // 用户交互弹窗,允许用户进行交互和行为操作
        - Popup     // 从屏幕边缘动态弹出显示的内容区域,具有统一风格的标题、取消、确认等操作按钮
        - Popover   // 悬浮弹窗,支持小批量操作列表,需要支持各种场景:上、下、左、右等
        - Toast // 消息展示
        - Loading   // 处理中
   - 表单类
        - Button
            - ButtonGroup 
        - TextInput
            - AutoComplete  // 允许自定义自动完成功能,如邮箱自动完成等
        - Select    // 需要考虑多种机型的兼容性和操作易用性
            - SelectGroup   // 联动多维度数据选择,比如省市区
        - Checkbox  // 需要充分考虑选中操作的易用性
        - Switch
        - ActionSheet
        - Form
   - 操作类
        - Carousel  // 自动轮播
        - Notice    // 页面级别消息通知,支持点击跳转
        - Slider    // 拖拽选择
        - ProgressBar   // 动态进度条
   - 页面布局
        - Tabbar    // 页面内部内容分类 
   - 复合组件
        - RefreshControl    // 下拉刷新,复合组件

相关推荐