zoukankan      html  css  js  c++  java
  • React Native选择器组件-react-native-slidepicker

    react-native-slidepicker

    一个纯 JavaScript 实现的的 React Native 组件,用于如地址,时间等分类数据选择的场景。

    github: https://github.com/lexguy/react-native-slidepicker

    效果

    三轮选择,选择级联地址数据:

    (可自定义条目高,选中和非选中条目的背景色,字体颜色和大小)

    起因

    当前使用的 react-native-picker 组件,虽然并没有什么功能上的硬伤,但是在样式可调性上稍差,而且鉴于该库的更新都是几年前了,issue 清理速度慢,所以还是需要备好替代方案。

    实现

    具体的实现方案,首先考虑到的方案就是ScrollView滑动,然后在滑动离开的时候再定位到邻近的选择Item上面。

    在使用ScrollView作单个选择的滑动效果时,发现在上面添加了透明背景色之后,ScrollView获取不到滑动事件,上层的View拦截掉手势效果,手动设置不处理手势,ScrollView 依然不能滑动。

    那就只能换一种方式了,那就换手势实现。

    选择列表根据手势的滑动做整体transform,根据手势上下偏移,手势释放的时候定位到最近的根据Item高度取整的位置。

    在每次手势停止的时候计算所处的位置,得到在数值列表中的索引,再通过props回调函数传回结果。如果是级联列表,需要重置下一选择轮的数据到初始值。

    级联列表的数据是对象和数组格式的反复嵌套,可以通过递归的方式去读取,然后在组件内部转换为扁平的平级数据后生成多个滑动区域和对应的列表数据。

    结果

    经过调试,终于得到结果,已经放在 Github 上 react-native-slidepicker (包含使用详情和源码)

    也上传到 npm 库,可以直接安装:

    npm install react-native-slidepicker react-native-gesture-handler -S
    

    使用参考 github 地址

  • 相关阅读:
    Javascript继承,再谈
    RHEL7使用systemctl管理服务
    centos7进入单用户模式修改root密码
    IBM DS5020 管理口密码重置
    IBM小机拆镜像换盘
    HMC版本支持
    IBM产品系列和AIX系统版本
    AIX 6.1创建逻辑卷并挂载【smitty】
    AIX中的网络管理
    创建AIX克隆盘
  • 原文地址:https://www.cnblogs.com/xuxiaowei/p/14412657.html
Copyright © 2011-2022 走看看