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