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 地址。
React Native选择器组件-react-native-slidepicker的更多相关文章
- 利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- React Native 之 组件化开发
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native的组件ListView
React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...
- React Native交互组件之Touchable
React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...
- React Native中组件的props和state
一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...
- React Native常用组件在Android和IOS上的不同
React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...
- 封装 React Native 原生组件(iOS / Android)
封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...
- React Native 系列(二) -- React入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- React-Native(三):React Native是基于React设计的
React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...
随机推荐
- python 基础学习3 列表和元组 、字符串
作为小白,坚持每日写学习记录,是督促坚持学习的动力, 今天主要是学习 列表和元组,列表是可以修改的,元组是不可变的.列表和元组的索引都是从0开始 列表可以修改, 可以对列表进行赋值,修改移除等各种方法 ...
- Windows操作Redis及Redis命令
Windows操作Redis及Redis命令 一.Windows下操作Redis 设置密码 打开redis服务 Windows 下的redis命令行 二.redis常用命令大全 key String ...
- KVM虚拟化(KVM简介和KVM安装)
KVM 虚拟化架构分类 寄居虚拟化架构:指在宿主操作系统之上安装和运行虚拟化程序,依赖于宿主操作系统对设备的支持和物理资源的管理. 裸金属虚拟化架构:指直接在硬件上面安装虚拟化软件,再在其上安装操作系 ...
- mvn 多模块
mvn archetype:generate -DgroupId=com.xxx.cloud -DartifactId=myapp -Dversion=1.0.0-SNAPSHOT -Dpackage ...
- 并发队列:ArrayBlockingQueue实际运用场景和原理
ArrayBlockingQueue实际应用场景 之前在某公司做过一款情绪识别的系统,这套系统通过调用摄像头接口采集人脸信息,将采集的人脸信息做人脸识别和情绪分析,最终经过一定的算法将个人情绪数据转化 ...
- MySQL特殊字符的转义处理
出现问题以及问题分析 这条语句会把user_name不为空的所有记录查询出来 select * from user where user_name like concat('%','_','%') 分 ...
- 搭建 mariadb 数据库主从同步
一.主(master)数据库配置 1. my.cnf 添加配置 [mariadb] log-bin server_id=1 log-basename=master1 binlog-format=mix ...
- Java JDBC 模糊查询 避免输入_,%返回全部数据
Java JDBC 模糊查询 避免输入_,%返回全部数据 "SELECT * FROM employees WHERE INSTR(first_name,?)>0 " 仅供参 ...
- H - 看病要排队
看病要排队这个是地球人都知道的常识.不过经过细心的0068的观察,他发现了医院里排队还是有讲究的.0068所去的医院有三个医生(汗,这么少)同时看病.而看病的人病情有轻重,所以不能根据简单的先来先服务 ...
- CF-1333F Kate and imperfection
F. Kate and imperfection 假设一个一个的往集合里面放元素,显然在放某个元素之前,我们不想让它的倍数已经在集合里面.因为在这之前,我们不如先把这个数放进去,再把它的倍数放进去更优 ...