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

2,083 阅读2分钟

react-native-slidepicker

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

github: github.com/lexguy/reac…

效果

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

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

起因

当前使用的 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 地址