React Native組件開發:架構設計

寫在前面的話:本人前端開發一枚,最近一年主要精力集中在React Native相關的開發工做,近期但願可以結合以往的一些工做經歷嘗試開發實現一套具有高質量、高通用性的RN組件庫,同時也借這個機會來加深對RN技術的學習和使用,在這裏將組件庫實現過程當中的一些思考分享出來,主要也是但願可以獲得業界一些資深老司機的建議。

該項目主要基於React Native(版本:0.57)技術對經常使用的移動端開發組件進行封裝,旨在提供一套集通用性與定製化於一體的組件庫,其應該包含一下基本特性:javascript

  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    // 下拉刷新,複合組件
相關文章
相關標籤/搜索