開發移動端react組件datepicker的總結與教訓

背景

前一陣,應公司的需求,須要一個在移動端運行的react組件datepicker(選擇日期)。
搜索查找事後,我並無找到一個既輕量級簡潔又知足需求的組件。大部分現成的日期選擇器都是相對於pc端開發的。前端

思考事後變決定本身寫一套移動端react日期選擇器組件react-mobile-datepickerreact

過程

開發過程當中並無什麼阻礙,功能完成後,通過了一系列單元測試,便發佈出去了,舊版如圖:
圖片描述git

  • 容許用戶修改背景,字體,按鈕顏色。github

  • 容許用戶上下滑動日期(但每日滑動僅限修改一個日期)單元測試

這個2.xx版本的日期選擇器,簡單粗暴,一經發布就獲得了普遍的吐槽。
吐槽的內容有:測試

  • 樣式醜陋字體

  • 配置選項太少,不管怎麼調顏色都很醜優化

  • 修改的日期不方便

教訓

通過大量參考其餘日期選擇器的樣式以及配置選項後,我發現用戶想要的並非本身控制組件的背景,文字顏色,而是須要一個已經配置好並符合常規,優雅的日期選擇器。用戶但願有現成的好看而且主流的樣式,而不是本身編寫樣式。
因而乎,在3.xx的版本中,預約義了5個主題供用戶來選擇,如圖:

default

圖片描述

dark

圖片描述

ios

圖片描述

android

圖片描述

android-dark

圖片描述

爲了知足更多的需求,優化後的組件添加了其餘的一些配置項,如讓用戶自定義顯示的日期格式,如圖:
圖片描述

以前上下滑動組件只能一個一個修改日期,優化後滑動日期的範圍更加普遍。

2.xx版本:
圖片描述

新版本:
圖片描述

總結

通過此次開發的教訓,我明白了開發一個好的組件,並不該該急於求成求,想固然的只完成單一狀況的需求。
而應該從用戶的角度出發,提升組件的易用性與靈活性。同時感謝吐槽與批評個人開發者,正由於有這些人的融入,才能讓每個前端組件不斷的完善,爲咱們所用。最後,誠摯邀請你們pull requests代碼。不斷完善國內的前端大業。

Github地址:https://github.com/lanjingling0510/react-mobile-datepicker

相關文章
相關標籤/搜索