美文网首页RN
下拉框控件react-native-modal-dropdown

下拉框控件react-native-modal-dropdown

作者: 苏荷蓝 | 来源:发表于2016-12-14 11:52 被阅读2138次

前言

不知不觉从今年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版本中,你能做到更多:

  1. 开放了renderSeparator接口,让你能自定义下拉框中的分割线
  2. 强势推出在renderRow中可以使用自己的TouchableXxxx组件。因为有小伙伴表示我想修改触摸时的背景色,也有小伙伴表示我想改成触摸时半透明。于是我就想,如果大家想用不同的Touchable组件,就让使用者自己决定吧!当然如果你一如既往的就喜欢我的样式,我也会始终如一的默认使用TouchableOpacity来为你生成每一行选项哒!而且新版本还修复了因为错误的背景色导致选项被选中时丑陋的黑色高亮(上面那个Gif中就是反面例子😳)。撒花🌹!
  3. 在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提供了一个名为adjustFrameProperty,这个方法会在dropdown需要显示前返回给你一个对象,对象中包含以下几种属性的一个子集:width height top left right,你可以根据实际情况修改这些属性的值,并将这个对象作为该函数的返回值返回给我即可调整下拉框的位置和高宽。

后续

我想后续我会在对RN的版本兼容上做一些工作,并且在新版RN发布后出现不兼容问题的时候跳出来发布新版本来更好的兼容。
也会收集大家的反馈来完善控件。
感谢大家的支持和喜欢💗!

相关文章

  • 下拉框控件react-native-modal-dropdown

    前言 不知不觉从今年9月发布第一版控件到现在已经快3个月了过去不断从开源社区索取,一直一直想着有机会一定要回报?于...

  • 高级表单样式

    无法彻底设计的控件的处理方式 1 .下拉框,复杂控件类型比如color,datetime-local,progre...

  • combogrid(数据表格下拉框)

    含义 数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件,该控件允许用户快速查找和选择,并且该控件提供了键...

  • RN 下拉列表

    安装 npm i react-native-modal-dropdown --save import ModalD...

  • 关于ReactNative的一些网址收集

    [原创]自己动手实现React-Native下拉框控件 - 極 - 博客园 http://www.cnblog...

  • 下拉框筛选控件

    Demo效果: 工程结构图: MMItem提供共同的接口,弹出视图由对应的MMItem子类数据驱动。 由于MMPo...

  • combotree(树形下拉框)

    含义 树形下拉框结合选择控件和下拉树控件。它与combobox(下拉列表框)类似,但是将下拉列表框的列表替换成了树...

  • Flutter 基础控件三

    1.引言 上一节学习了Image 和RaisedButton,下拉框等控件。链接:https://www.jian...

  • 第九节 串口控制的实现

    1.在主文件Dialog中拖入相关控件,如图所示 2.双击下拉框控件,在主文件Dlg.cpp中自动生成结构代码 C...

  • Android中Spinner控件的使用(转)

    1.创建Spinner控件 2.创建下拉框的数据源 3.创建适配器Adapter 4.为适配器添加样式 5.向控件...

网友评论

  • 0ffd7d9c397d:请问你有做过三级联动吗?我现在做一个关于地址三级联动,发现第一次能正常联动,第二和第三点击过后再点击第一级就不能联动了,请大神指教怎么解决
  • YDM_4718:很厉害,向你学习
  • 19dfa6bcdb2c:请问用onselect方法怎样返回一个数组value
  • c87338d4c455:怎么把点击的下拉框按钮安成图片
  • pawn_cheng:大佬,我用你这组件做个一个封装成了一个联动组件,但是这个defaultValue只能出发一次,怎么搞呀?
    pawn_cheng:@苏荷蓝 大佬,你有没有遇到过旧点的Android版本(比如Android 5),点击下拉框的时候,屏幕内容会平移?
    pawn_cheng:@苏荷蓝 好的,我试试
    苏荷蓝:可以通过api来控制选择哪一项,设置好ref,比如ref="dropdown",然后在需要的时候调用this.refs.dropdown.select(-1)就可以显示defaultValue了
  • 0cb182208e63:adjustFrame这个回调函数要怎么用啊,我想让下拉框只显示3格,这个现在默认是4格。求大神指导一下
    苏荷蓝:这个回调参数会给你一个很简单的计算好的布局对象,你可以log打出来看,主要涉及位置和长宽,你可以改动对象内的参数和数值,然后作为返回值return即可

本文标题:下拉框控件react-native-modal-dropdown

本文链接:https://www.haomeiwen.com/subject/fmmtyttx.html