写在前面的话:本人前端开发一枚,最近一年主要精力集中在React Native相关的开发工做,近期但愿可以结合以往的一些工做经历尝试开发实现一套具有高质量、高通用性的RN组件库,同时也借这个机会来加深对RN技术的学习和使用,在这里将组件库实现过程当中的一些思考分享出来,主要也是但愿可以获得业界一些资深老司机的建议。
该项目主要基于React Native(版本:0.57)技术对经常使用的移动端开发组件进行封装,旨在提供一套集通用性与定制化于一体的组件库,其应该包含一下基本特性:javascript
在结构上,将按照基础组件、工具方法、通用组件、主题定制等多个层次进行架构搭建:前端
- 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 // 下拉刷新,复合组件