开发移动端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

相关文章
相关标签/搜索