开发移动端react组件datepicker的总结与教训

sewerganger 发布于2019-08-20 11:05 / 1377人阅读

摘要：背景前一阵，应公司的需求，需要一个在移动端运行的组件选择日期。思考过后变决定自己写一套移动端日期选择器组件。而应该从用户的角度出发，提高组件的易用性与灵活性。

背景

前一阵，应公司的需求，需要一个在移动端运行的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

云服务器专线服务移动端开发 web移动端开发移动端网站开发 java移动端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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界面一点不重要，重要的是底层的思维，解决问题和优化...

Travis 2019-08-30 11:19 评论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界面一点不重要，重要的是底层的思维，解决问题和优化...

pekonchan 2019-08-05 17:33 评论0 收藏0