这是一个创建于 625 天前的主题，其中的信息可能已经有所发展或是发生改变。
https://mouyase.notion.site/RN-f9af8aa4aa0a4e0bb1319bf9ba4aba94
↑演示视频
简单点说就是一个在现在的 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 这种缩放模式，结果导致干活的时候各种造轮子……很想知道各位大神们都是怎么找到可用的组件来解决问题的。
↑演示视频
简单点说就是一个在现在的 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 这种缩放模式，结果导致干活的时候各种造轮子……很想知道各位大神们都是怎么找到可用的组件来解决问题的。
 | 1 xiaoshan5733 2024-01-26 14:35:57 +08:00 现成的确实没有，可能需要使用基础库自己去实现 https://github.com/software-mansion/react-native-reanimated |
 | 2 mouyase OP @xiaoshan5733 自己实现过了，现在的问题是如果在 onScroll 的时候移动 Tab 的位置/扩大 Tab 的尺寸，会导致 ScrollView 的坐标产生改变，就会出现用户向上划了 1 像素，然后 View 跟着向上移动了 1 像素，因为 View 向上了 1 像素，所以 onScroll 事件相当于又向下了 1 像素。结果就会出现缓慢滑动的时候，整个 View 都在上下抖（因为相当于 onScroll 同时触发了上下两个坐标，导致循环渲染） |
| 3 mouyase OP |
 | 4 for4die 2024-01-26 15:51:36 +08:00 |
| 5 for4die 2024-01-26 15:53:42 +08:00 有个技巧就是改变缩放的中心点，别的都没什么难的 |
| 6 mouyase OP @for4die 感谢，不过如果仅仅是 View+SrcollView 的组合，本身我已经可以实现了。问题在于一个在 Scroll 外部的 View ，并且还要支持 tab ，这两点加起来我就搞不定了 |
 | 7 9i5NngJHI4P7dm42 2024-01-26 19:42:47 +08:00 跟我遇到了同样的问题所以我后来选择了 flutter |
 | 8 AvilCore 2024-01-26 22:26:35 +08:00 via Android rn 库方面，优先考虑用 expo 和他的组件，比如 fastimage 已经被抛弃，expo image 是他的上位替换 另外比如瀑布流，搜索 infinite scroll 会有很多 rn 实现的结果，而国内生态大多偏向 flutter 找不到也正常 |
 | 10 codehz 2024-01-27 02:00:17 +08:00 其实可以换一个思路，用 bottom sheet 去实现这个 @gorhom/bottom-sheet 这个库的 bottom sheet 支持 tab 和多个 scrollview （需要用它包里的或者用它提供的 hooks ，当然也不是非常完美，但我觉得很大程度上能用了） 然后虽然名字是 bottom sheet 但它可以常开，backdrop 也能放 header （和动画），可以说一次解决了可收缩 header 和 tab 的需求 |
 | 11 iliaoliao 2024-01-27 03:38:12 +08:00 前几个月也有在打算在 v2fun 实现这个功能，琢磨了挺久也没整明白。 |
 | 12 jinliming2 2024-01-27 22:22:42 +08:00 via iPhone  1 |
| 13 iliaoliao 2024-01-28 01:09:01 +08:00 @jinliming2 不是的，你可以看看 twitter 效果 |
| 14 jinliming2 2024-01-28 01:49:47 +08:00 @iliaoliao emmmmm ，楼主第一个链接里贴的视频不就是 B 站 App 的效果么，我照着 B 站 App 实现的。。。 没太明白 twitter 效果是指？手机 App 上貌似没有看到 header 相关的效果？ |
| 15 iliaoliao 2024-01-28 03:43:37 +08:00 @jinliming2 没看到视频，我想的是 twitter 首页 header 的收缩效果呢。 @mouyase 楼主也可以参考 v2fun 用户详情里的实现，效果和视频里的差不多。 源码地址： https://github.com/liaoliao666/v2ex/blob/main/screens/MemberDetailScreen.tsx |
| 16 jinliming2 2024-01-28 11:13:54 +08:00 via iPhone @iliaoliao 是 twitter 的手机端吗？ iOS App 的 header 很简单啊，下拉就就跟着下来，上滑就上去，react 官方文档的 Animated 里都有那个的示例的啊？最多就是加个阈值延迟 |
| 17 iliaoliao 2024-01-28 16:10:49 +08:00 @jinliming2 官网上示例我找不到，是多个 scrollView 的吗。 其实如果你能实现的话可以考虑整个开源项目，我直接用你的。不整的话等我我闲下来估计也会做个这种开源，应该会有不少 star。 |
| 18 mouyase OP @AvilCore expo 现在的兼容性如何？和原生的库/组件的兼容性好吗？因为公司有业务要接原生的代码库，不知道好不好迁移。 |
| 19 mouyase OP @jinliming2 大佬是真的牛！这个应该就是想要实现出来的效果了，正在看源码学习中。 |
 | 20 Cookmilk 2024-08-19 19:38:43 +08:00 via iPhone |
Select Language