想要用 ReactNative 实现一个效果，求各路大神指点一下

[mouyase]

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 这种缩放模式，结果导致干活的时候各种造轮子……很想知道各位大神们都是怎么找到可用的组件来解决问题的。

[xiaoshan5733]

现成的确实没有，可能需要使用基础库自己去实现 https://github.com/software-mansion/react-native-reanimated

[mouyase]

@xiaoshan5733 自己实现过了，现在的问题是如果在 onScroll 的时候移动 Tab 的位置/扩大 Tab 的尺寸，会导致 ScrollView 的坐标产生改变，就会出现用户向上划了 1 像素，然后 View 跟着向上移动了 1 像素，因为 View 向上了 1 像素，所以 onScroll 事件相当于又向下了 1 像素。结果就会出现缓慢滑动的时候，整个 View 都在上下抖（因为相当于 onScroll 同时触发了上下两个坐标，导致循环渲染）

[mouyase]

@xiaoshan5733
这里有一个类似的 issues
https://github.com/software-mansion/react-native-reanimated/issues/5324

[for4die]

https://snack.expo.dev/@3dtheo/honest-blue-crackers

[for4die]

有个技巧就是改变缩放的中心点，别的都没什么难的

[mouyase]

@for4die 感谢，不过如果仅仅是 View+SrcollView 的组合，本身我已经可以实现了。问题在于一个在 Scroll 外部的 View ，并且还要支持 tab ，这两点加起来我就搞不定了

[9i5NngJHI4P7dm42]

跟我遇到了同样的问题😂所以我后来选择了 flutter

[AvilCore]

rn 库方面，优先考虑用 expo 和他的组件，比如 fastimage 已经被抛弃，expo image 是他的上位替换

另外比如瀑布流，搜索 infinite scroll 会有很多 rn 实现的结果，而国内生态大多偏向 flutter 找不到也正常

[codehz]

@mouyase 这个问题连 youtube 都有，（ iOS ）建议直接无视（

[codehz]

其实可以换一个思路，用 bottom sheet 去实现这个
@gorhom/bottom-sheet
这个库的 bottom sheet 支持 tab 和多个 scrollview （需要用它包里的或者用它提供的 hooks ，当然也不是非常完美，但我觉得很大程度上能用了）
然后虽然名字是 bottom sheet 但它可以常开，backdrop 也能放 header （和动画），可以说一次解决了可收缩 header 和 tab 的需求

[iliaoliao]

前几个月也有在打算在 v2fun 实现这个功能，琢磨了挺久也没整明白😂。

[jinliming2]

随便实现了一个，看看是不是这个效果？

https://snack.expo.dev/@jinliming2/bilibili-page-scroll

[iliaoliao]

@jinliming2 不是的，你可以看看 twitter 效果

[jinliming2]

@iliaoliao emmmmm ，楼主第一个链接里贴的视频不就是 B 站 App 的效果么，我照着 B 站 App 实现的。。。
没太明白 twitter 效果是指？手机 App 上貌似没有看到 header 相关的效果？

[iliaoliao]

@jinliming2 没看到视频，我想的是 twitter 首页 header 的收缩效果呢😂。
@mouyase 楼主也可以参考 v2fun 用户详情里的实现，效果和视频里的差不多。
源码地址： https://github.com/liaoliao666/v2ex/blob/main/screens/MemberDetailScreen.tsx

[jinliming2]

@iliaoliao 是 twitter 的手机端吗？ iOS App 的 header 很简单啊，下拉就就跟着下来，上滑就上去，react 官方文档的 Animated 里都有那个的示例的啊？最多就是加个阈值延迟

[iliaoliao]

@jinliming2 官网上示例我找不到，是多个 scrollView 的吗。
其实如果你能实现的话可以考虑整个开源项目，我直接用你的。不整的话等我我闲下来估计也会做个这种开源，应该会有不少 star😂。

[mouyase]

@AvilCore expo 现在的兼容性如何？和原生的库/组件的兼容性好吗？因为公司有业务要接原生的代码库，不知道好不好迁移。

[mouyase]

@jinliming2 大佬是真的牛！这个应该就是想要实现出来的效果了，正在看源码学习中。

[Cookmilk]

@jinliming2 大佬我给你发邮件了，可否看一下。
@iliaoliao