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

背景

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

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

• Github

• Demo

過程

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

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

• 容許用戶上下滑動日期（但每日滑動僅限修改一個日期）

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

• 樣式醜陋

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

• 修改的日期不方便

教訓

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

default

dark

ios

android

android-dark

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

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

2.xx版本：

新版本：

總結

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

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