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的更多相关文章

  1. 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

  2. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. React Native的组件ListView

    React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...

  4. React Native交互组件之Touchable

    React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...

  5. React Native中组件的props和state

    一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...

  6. React Native常用组件在Android和IOS上的不同

    React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...

  7. 封装 React Native 原生组件(iOS / Android)

    封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...

  8. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  9. React-Native(三):React Native是基于React设计的

    React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...

随机推荐

  1. 【ElasticSearch】 使用AWS云ES服务来分析程序日志

    最近公司系统升级,有些API的调用接口达到了每天10几万的请求量.目前公司里的日志,都是写文本文件中的.为了能够更好的分析这些日志数据,公司采用了AWS 的 ElasticSearch服务来分析日志. ...

  2. 写给小白的 Nginx 文章

    原文地址:Nginx concepts I wish I knew years ago 原文作者:Aemie Jariwala(已授权) 译者 & 校正:HelloGitHub-小鱼干 &am ...

  3. springboot+Jenkins+docker-compose自动部署项目实践

    DevOps思想 一个开发.测试.运维的整个过程的思想. plan:需求.计划 code:编码 build:构建 test: 测试 release:发布版本 deploy:部署 operate:项目运 ...

  4. Prometheus-process exporter-进程监控

    Prometheus-process exporter-进程监控 1.下载安装 2.修改配置文件 3.启动 相关内容原文地址: 博客园:落烨无痕:process exporter 配置项解释 huan ...

  5. Spark练习之Transformation操作开发

    Spark练习之Transformation操作开发 一.map:将集合中的每个元素乘以2 1.1 Java 1.2 Scala 二.filter:过滤出集合中的偶数 2.1 Java 2.2 Sca ...

  6. postfix “ Sender address rejected: not logged in”

      一.问题 先说一下问题,我们公司有两台邮件服务器,分别是不同的域名但是用的是同一个用户认证,最近老有人反应说,有匿名邮件就是通过类似这种网站,进行使用你们公司的SMTP邮件服务器进行发送垃圾邮件 ...

  7. servelet 实现Post接口访问

    先上代码: package com.jovtec.galaxy.mailbox; import java.io.BufferedReader; import java.io.IOException; ...

  8. Centos6.5添加163软件yum源

    将yum源设置为163yum,可以提升软件包安装和更新的速度,同时避免一些常见软件版本无法找到.具体设置方法如下: 1,进入yum源配置目录cd /etc/yum.repos.d 2,备份系统自带的y ...

  9. SpringMVC系列(一)核心:处理请求流程

    http://blog.csdn.net/zhaolijing2012/article/details/41596803

  10. Git实现1个项目2个地址1次推送

    Git实现1个项目2个地址1次推送 考虑到不需要pull操作,因此本方法适用于个人项目分别在两个平台或地址进行部署 给origin 增加一个可以push的地址 git remote set-url - ...