↑演示视频
简单点说就是一个在现在的 App 里比较常见的一个可收缩的 Header 样式。
上面是可以随着滚动元素收缩的一个头部元素,然后中间是一个 Tab ,可以切换不同的页面,每一个页面里面都是一个可滚动的 View(ScrollView),然后当滚动到顶部时,继续向上滚动就会收缩头部,反过来当向下滚动时,则会展开头部。然后两个不同的 Tab 的状态互相独立,并且每一个 Tab 都遵循这个规则。
这个效果明明很常见,但是我在 ReactNative 相关的技术却没有找到比较好的实现方案。
尝试过这个库
https://github.com/PedroBern/react-native-collapsible-tab-view
但是这个库有 Bug ,比如第一个 Tab 滚动到顶部之后,切换到第二个 Tab ,结果位置还是在初始位置,碰一下又会跳动到和第一个 Tab 相同的位置之类的
也尝试过自己实现,但是会出现一个问题,就是如果在 onScroll 的时候移动 Tab 的位置/扩大 Tab 的尺寸,会导致 ScrollView 的坐标产生改变,就会出现用户向上划了 1 像素,然后 View 跟着向上移动了 1 像素,因为 View 向上了 1 像素,所以 onScroll 事件相当于又向下了 1 像素。结果就会出现缓慢滑动的时候,整个 View 都在上下抖(因为相当于 onScroll 同时触发了上下两个坐标,导致循环渲染)
总之不知道各位大神有没有好的方案来实现这个东西
PS: 顺便吐槽一下 RN 生态的问题,有不少东西都不知道到哪才能了解到或者学习到。比如之前想要实现瀑布流,搜了半天都没搜到相关的组件或者库。结果后来发现有个库叫 @shopify/flash-list ,这玩意可以实现瀑布流,但是这东西的名字里完全没有相关的信息,感觉没用过就不会有人知道的样子。包括类似 FastImage 这种东西,两年多没有更新,而且至今不支持图片 Blur ,也不支持 topCenter 这种缩放模式,结果导致干活的时候各种造轮子……很想知道各位大神们都是怎么找到可用的组件来解决问题的。