程序员经验分享-hwhale

React Native 选择器组件 / react-native-slidepicker

2023-05-16

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 高度取整的位置。选择列表和透明背景层都处理手势，也操作该 tranform 动画值，就不会有手势滑动区域小的问题了。

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

结果

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

也上传到 npm 库，可以直接安装：

npm install react-native-slidepicker

使用参考 github 地址。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

React

Native

slidepicker

React Native 选择器组件 / react-native-slidepicker 的相关文章

随机推荐

  • 大数据013——Flume

    1 Flume 简介 Flume是由Cloudera软件公司提供的一个高可用的 xff0c 高可靠的 xff0c 分布式的海量日志采集 聚合和传输的系统 xff0c 后与2009年被捐赠了apache软件基金会 xff0c 为hadoop相

  • Hadoop源码分析——计算模型MapReduce

    MapReduce 是一个计算模型 xff0c 也是一个处理和生成超大数据集的算法模型的相关实现 用户首先创建一个Map函数处理一个基于key value pair的数据集合 xff0c 输出中间的基于 key value pair 的数据

  • 从SDLC到DevSecOps的转变

    OSSTMM 根据开源安全测试方法手册OSSTMM Open Source Security Testing Methodology Manual 的表述 安全测试包括但不限于以下几种做法 漏洞扫描 安全扫描 渗透测试 风险评估 安全审核

  • 大数据014——Storm 简介及入门案例

    分布式实时数据处理框架 Storm 1 Storm简介与核心概念 1 1 Storm 简介 全称为 Apache Storm xff0c 是一个分布式实时大数据处理系统 它是一个流数据框架 xff0c 具有最高的获取率 它比较简单 xff0

  • Hive与HBase整合详解

    参考之前小节的大数据010 Hive与大数据012 HBase成功搭建Hive和HBase的环境 xff0c 并进行了相应的测试 xff0c 并且在大数据011 Sqoop中实现Hive HBase与MySQL之间的相互转换 xff1b 本

  • 大数据015——Elasticsearch基础

    1 Elasticsearch 简介 Elasticsearch是一个基于Lucene的实时的分布式搜索和分析 引擎 设计用于云计算中 xff0c 能够达到实时搜索 xff0c 稳定 xff0c 可靠 xff0c 快速 xff0c 安装使用

  • 大数据015——Elasticsearch深入

    1 Elasticsearch 核心概念 1 1 cluster 代表一个集群 xff0c 集群中有多个节点 xff0c 其中有一个为主节点 xff0c 这个主节点是可以通过选举产生的 xff0c 主从节点是对于集群内部来说的 es的一个重

  • 大数据014——Storm 集群及入门案例

    分布式实时数据处理框架 Storm 1 Storm 集群 1 1 Storm 版本变更 版本编写语言重要特性HA 高可用0 9 xjava 43 clojule改进与Kafka HDFS HBase的集成不支持 xff0c storm集群只

  • 大数据016——Kafka

    1 Kafka 简介 Kafka 是一个高吞吐量 低延迟分布式的消息队列系统 kafka 每秒可以处理几十万条消息 xff0c 它的延迟最低只有几毫秒 Kafka 也是一个高度可扩展的消息系统 xff0c 它在LinkedIn 的中央数据管

  • 大数据017——Scala基础

    Scala 是一门以 java 虚拟机 xff08 JVM xff09 为目标运行环境并将面向对象和函数式编程语言的最佳特性结合在一起的编程语言 你可以使用Scala 编写出更加精简的程序 xff0c 同时充分利用并发的威力 由于scala

  • 大数据017——Scala进阶

    Scala 基础语法 第二阶段 1 类和对象 1 1 类 1 xff09 简单类和无参方法 如下定义Scala类最简单形式 xff1a class Counter private var value 61 0 必须初始换字段 def inc

  • 大数据018——Spark(一)

    1 Spark 数据分析简介 1 1 Spark 是什么 Spark 是一个用来实现快速而通用的集群计算的平台 在速度方面 xff0c Spark 扩展了广泛使用的 MapReduce 计算模型 xff0c 而且高效地支持更多计算模式 xf

  • ROS 订阅RealsenseD435图像与opencv保存32位深度图像

    一 xff0c 通过ros订阅realsense图像 int main int argc char argv ros init argc argv 34 image listener 34 ros NodeHandle nh cv name

  • 测试左移和右移：不是左右逢源而是左右突击

    持续测试是在软件交付生命周期过程中 xff0c 以防控业务风险为目的 xff0c 将每一个业务交付阶段都辅以测试活动进行质量保障 xff0c 并尽最大可能自动化 xff0c 通过测试结果不断的反馈给制品过程的测试实践活动 随着持续测试实践的

  • 虚拟机ubuntu上安装make和cmake

    可先更新下apt xff1a sudo apt get update 首先安装make xff1a sudo apt get install ubuntu make sudo apt get install make sudo apt ge

  • ros学习笔记（十）：树莓派 Ubuntu mate 16.04 开启vncserver 远程桌面+自启动+分辨率修改

    树莓派 Ubuntu mate 16 04 开启vncserver 远程桌面 43 自启动 43 分辨率修改 一 环境 1 树莓派3b 43 Ubuntu 16 04 mate 2 我是在win10 安装的 vncview 软件进行远程桌面

  • 梯度、散度、旋度的关系

    转自 百度文库https wenku baidu com view 681228626137ee06eff918c4 html 知乎上一篇不错的文章 https www zhihu com question 24591127 麦克斯韦方程组

  • 【瓣芽·Banya】React Native 构建的仿豆瓣应用

    今天介绍一个用 React Native 创建的应用 xff0c 集合了豆瓣电影 xff0c 图书等信息展示功能的 app github 地址 瓣芽 Banya 项目使用了react navigation 做路由 redux 做部分状态管理

  • CSS - position

    在 CSS 中 xff0c position 是实现元素定位的一种重要方式 使用定位的元素层叠级别比浮动会更高 xff0c 采用定位来控制元素位置会更加容易 一般我们使用定位 xff0c 是通过使用定位模式和边偏移量来确定元素位置的 定位模

  • React Native 选择器组件 / react-native-slidepicker

    react native slidepicker 一个纯 JavaScript 实现的的 React Native 组件 xff0c 用于如地址 xff0c 时间等分类数据选择的场景 github https github com lexg

热门标签