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

sewerganger 發布于2019-08-20 11:05 / 1534人閱讀

摘要：背景前一陣，應公司的需求，需要一個在移動端運行的組件選擇日期。思考過后變決定自己寫一套移動端日期選擇器組件。而應該從用戶的角度出發，提高組件的易用性與靈活性。

背景

前一陣，應公司的需求，需要一個在移動端運行的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

云服務器 GPU云服務器移動端開發 web移動端開發移動端網站開發 java移動端開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80392.html

「react-mobile-datepicker」一個移動端的react日期選擇器組件

摘要：一個輕量級的移動端日期選擇器，不依賴于只有不到大小。可以通過上下滑動來設置年月日。在模擬的移動端可上下滑動觸發事件。使用例子組件屬性名稱類型默認描述是否彈出日期選擇框的主題包括根據指定的年，月，日格式顯示日期。 react-mobile-datepicker 一個輕量級的react移動端日期選擇器，不依賴于moment.js, 只有不到4k大小。 react-mobile-datepi...

娣辯孩 2019-08-22 10:38 評論0 收藏0
React的移動端和PC端生態圈的使用匯總

摘要：調用通過注冊表調用到實例，透過的，調用到中的，最后通過，調用，根據參數相應模塊執行。京東的，多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術，我們不能停留在五分鐘狀態，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優化...

kun_jian 2019-08-02 15:28 評論0 收藏0
React的移動端和PC端生態圈的使用匯總

摘要：調用通過注冊表調用到實例，透過的，調用到中的，最后通過，調用，根據參數相應模塊執行。京東的，多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術，我們不能停留在五分鐘狀態，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優化...

J4ck_Chan 2019-08-23 18:32 評論0 收藏0
React的移動端和PC端生態圈的使用匯總

摘要：調用通過注冊表調用到實例，透過的，調用到中的，最后通過，調用，根據參數相應模塊執行。京東的，多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術，我們不能停留在五分鐘狀態，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優化...

Travis 2019-08-30 11:19 評論0 收藏0