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 地址。