这是一个创建于 310 天前的主题，其中的信息可能已经有所发展或是发生改变。
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 310 天前
现成的确实没有，可能需要使用基础库自己去实现 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 |
 |
5
for4die 310 天前
有个技巧就是改变缩放的中心点，别的都没什么难的
|
|
6
mouyase OP @for4die 感谢，不过如果仅仅是 View+SrcollView 的组合，本身我已经可以实现了。问题在于一个在 Scroll 外部的 View ，并且还要支持 tab ，这两点加起来我就搞不定了
|
 |
7
9i5NngJHI4P7dm42 310 天前
跟我遇到了同样的问题😂所以我后来选择了 flutter
|
 |
8
AvilCore 310 天前 via Android
rn 库方面，优先考虑用 expo 和他的组件，比如 fastimage 已经被抛弃，expo image 是他的上位替换
另外比如瀑布流，搜索 infinite scroll 会有很多 rn 实现的结果，而国内生态大多偏向 flutter 找不到也正常 |
 |
10
codehz 310 天前
其实可以换一个思路，用 bottom sheet 去实现这个
@gorhom/bottom-sheet 这个库的 bottom sheet 支持 tab 和多个 scrollview （需要用它包里的或者用它提供的 hooks ，当然也不是非常完美，但我觉得很大程度上能用了） 然后虽然名字是 bottom sheet 但它可以常开，backdrop 也能放 header （和动画），可以说一次解决了可收缩 header 和 tab 的需求 |
 |
11
iliaoliao 310 天前
前几个月也有在打算在 v2fun 实现这个功能，琢磨了挺久也没整明白😂。
|
 |
12
jinliming2 309 天前 via iPhone  1
|
|
13
iliaoliao 309 天前
@jinliming2 不是的，你可以看看 twitter 效果
|
|
14
jinliming2 309 天前
@iliaoliao emmmmm ，楼主第一个链接里贴的视频不就是 B 站 App 的效果么，我照着 B 站 App 实现的。。。
没太明白 twitter 效果是指？手机 App 上貌似没有看到 header 相关的效果？ |
|
15
iliaoliao 309 天前
@jinliming2 没看到视频，我想的是 twitter 首页 header 的收缩效果呢😂。
@mouyase 楼主也可以参考 v2fun 用户详情里的实现，效果和视频里的差不多。 源码地址： https://github.com/liaoliao666/v2ex/blob/main/screens/MemberDetailScreen.tsx |
|
16
jinliming2 308 天前 via iPhone
@iliaoliao 是 twitter 的手机端吗？ iOS App 的 header 很简单啊，下拉就就跟着下来，上滑就上去，react 官方文档的 Animated 里都有那个的示例的啊？最多就是加个阈值延迟
|
|
17
iliaoliao 308 天前
@jinliming2 官网上示例我找不到，是多个 scrollView 的吗。
其实如果你能实现的话可以考虑整个开源项目，我直接用你的。不整的话等我我闲下来估计也会做个这种开源，应该会有不少 star😂。 |
|
19
mouyase OP @jinliming2 大佬是真的牛！这个应该就是想要实现出来的效果了，正在看源码学习中。
|
 |
20
Cookmilk 104 天前 via iPhone
|
Select Language