[原创]下拉框控件react-native-modal-dropdown更新历程

最新推荐文章于 2024-05-19 09:41:59 发布

weixin_30472035

最新推荐文章于 2024-05-19 09:41:59 发布

阅读量318

点赞数

原文链接：http://www.cnblogs.com/sohobloo/p/6178763.html

版权

1240

前言

不知不觉从今年9月发布第一版控件到现在已经快3个月了
过去不断从开源社区索取，一直一直想着有机会一定要回报?
于是在项目闲暇之时，将自己在项目中设计使用的控件提取出，加以来完善上传到了Github并发布到npm
短短3个月，收获了国内外友人的不少的⭐️和Feedback，真诚的非常感谢大家的支持也感激各位不吝提出Issues和Pull requests
三个月我一共发了9个版本，现在控件已经升级到v0.4.0，期间只是更新了Github上英文的readme，一直没有再更新中文说明，这里就用一篇总结方式的短篇，把一些新的变化总结一下吧，同时也能让大家了解一些设计思路和想法

项目地址

https://github.com/sohobloo/react-native-modal-dropdown

更新总结

更智能易用啦

先从删掉的内容讲起吧：从v0.3.0开始，我将updatePosition属性标记为不推荐，并已经实际将其中的代码全部移除。从v0.3.1开始彻底删除了这个方法。不过出了点小小意外，删除了方法体却没有把构造函数中的bind语句一并删除，所以紧急发布了v0.3.2修复这个Bug?
这个方法在当初设计的作用是因为在某些情况下使用控件，比如在ScrollView中，下拉框的相对位置可能会不断改变，因此希望发生这种情况的时机使用者能手动调用一下以便下拉框下次弹出时的位置能得到正确计算。在当初我在项目中使用的控件就用的这个办法。
但我一直觉得这样不妥，我偏向于让使用者更轻松，于是在评估了性能之后，从v0.3.0我加上了显示下拉框前自动计算更新位置的功能！耶?！
功能更强大啦

因为以前没有发布过，在准备和实现v0.1.0的过程中，我需要学习其他控件的package文件，以便发布到npm。当然是去看比较相似的控件，所以我从这些控件得到一些很不错的想法。于是，于是乎，于是呢v0.2.0版本我就加上了把控件作为容器使用的功能。逮谁谁怀孕变成下拉框按钮的梦想终于实现了?：

怀出一朵小红?

定制化更丰富了
随着使用人数变多，大家的定制化需求也会慢慢浮现，所以在最新的v0.4.0版本中，你能做到更多：

开放了renderSeparator接口，让你能自定义下拉框中的分割线
强势推出在renderRow中可以使用自己的TouchableXxxx组件。因为有小伙伴表示我想修改触摸时的背景色，也有小伙伴表示我想改成触摸时半透明。于是我就想，如果大家想用不同的Touchable组件，就让使用者自己决定吧！当然如果你一如既往的就喜欢我的样式，我也会始终如一的默认使用TouchableOpacity来为你生成每一行选项哒！而且新版本还修复了因为错误的背景色导致选项被选中时丑陋的黑色高亮（上面那个Gif中就是反面例子?）。撒花?！
在v0.3.0之后的两个小版本修复了一些Bug，让大家可以正确的在自定义的style中设置下拉框的高度和宽度了。非常感谢发现问题的@cgwu童鞋，你发现了第一个，我顺藤摸瓜把另一个也修复啦~

兼容性更佳了

收到的第一个Pull Request来至一位帅气活跃的国外友人@NikolaBorislavovHristov，去除了使用Object类型作为style时的⚠️，跟随v0.4.0一同发布
最后就是针React Native的v0.36.0的一个重大变更做了兼容，这一项也跟随v0.4.0一同发布。所以如果您的React-Native版本如果过低的话，使用最新v0.4.0版本的时候可能会出现flexGrow样式找不到的问题，这一样式应该是React-Native的v0.34.1版本之后才有的哦。
仍有不足

在某些情况下，对于下拉框的位置计算仍然存在不精确的情况，但问题发生的情况和环境很难预估。所以在出现了这种状况时，小伙伴们只能用v0.4.0提供的一个work around方法来重新给出自己计算的位置了。
v0.4.0提供了一个名为adjustFrame的Property，这个方法会在dropdown需要显示前返回给你一个对象，对象中包含以下几种属性的一个子集：width height top left right，你可以根据实际情况修改这些属性的值，并将这个对象作为该函数的返回值返回给我即可调整下拉框的位置和高宽。