V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
mouyase
V2EX  ›  程序员

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

  •  
  •   mouyase ·
    mouyase · 284 天前 · 3109 次点击
    这是一个创建于 284 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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 这种缩放模式,结果导致干活的时候各种造轮子……很想知道各位大神们都是怎么找到可用的组件来解决问题的。
    20 条回复    2024-08-19 19:38:44 +08:00
    xiaoshan5733
        1
    xiaoshan5733  
       284 天前
    现成的确实没有,可能需要使用基础库自己去实现 https://github.com/software-mansion/react-native-reanimated
    mouyase
        2
    mouyase  
    OP
       284 天前
    @xiaoshan5733 自己实现过了,现在的问题是如果在 onScroll 的时候移动 Tab 的位置/扩大 Tab 的尺寸,会导致 ScrollView 的坐标产生改变,就会出现用户向上划了 1 像素,然后 View 跟着向上移动了 1 像素,因为 View 向上了 1 像素,所以 onScroll 事件相当于又向下了 1 像素。结果就会出现缓慢滑动的时候,整个 View 都在上下抖(因为相当于 onScroll 同时触发了上下两个坐标,导致循环渲染)
    mouyase
        3
    mouyase  
    OP
       284 天前
    for4die
        5
    for4die  
       284 天前
    有个技巧就是改变缩放的中心点,别的都没什么难的
    mouyase
        6
    mouyase  
    OP
       284 天前
    @for4die 感谢,不过如果仅仅是 View+SrcollView 的组合,本身我已经可以实现了。问题在于一个在 Scroll 外部的 View ,并且还要支持 tab ,这两点加起来我就搞不定了
    9i5NngJHI4P7dm42
        7
    9i5NngJHI4P7dm42  
       284 天前
    跟我遇到了同样的问题😂所以我后来选择了 flutter
    AvilCore
        8
    AvilCore  
       284 天前 via Android
    rn 库方面,优先考虑用 expo 和他的组件,比如 fastimage 已经被抛弃,expo image 是他的上位替换

    另外比如瀑布流,搜索 infinite scroll 会有很多 rn 实现的结果,而国内生态大多偏向 flutter 找不到也正常
    codehz
        9
    codehz  
       283 天前
    @mouyase 这个问题连 youtube 都有,( iOS )建议直接无视(
    codehz
        10
    codehz  
       283 天前
    其实可以换一个思路,用 bottom sheet 去实现这个
    @gorhom/bottom-sheet
    这个库的 bottom sheet 支持 tab 和多个 scrollview (需要用它包里的或者用它提供的 hooks ,当然也不是非常完美,但我觉得很大程度上能用了)
    然后虽然名字是 bottom sheet 但它可以常开,backdrop 也能放 header (和动画),可以说一次解决了可收缩 header 和 tab 的需求
    iliaoliao
        11
    iliaoliao  
       283 天前
    前几个月也有在打算在 v2fun 实现这个功能,琢磨了挺久也没整明白😂。
    jinliming2
        12
    jinliming2  
       283 天前 via iPhone   ❤️ 1
    随便实现了一个,看看是不是这个效果?

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

    iliaoliao
        13
    iliaoliao  
       282 天前
    @jinliming2 不是的,你可以看看 twitter 效果
    jinliming2
        14
    jinliming2  
       282 天前
    @iliaoliao emmmmm ,楼主第一个链接里贴的视频不就是 B 站 App 的效果么,我照着 B 站 App 实现的。。。
    没太明白 twitter 效果是指?手机 App 上貌似没有看到 header 相关的效果?
    iliaoliao
        15
    iliaoliao  
       282 天前
    @jinliming2 没看到视频,我想的是 twitter 首页 header 的收缩效果呢😂。
    @mouyase 楼主也可以参考 v2fun 用户详情里的实现,效果和视频里的差不多。
    源码地址: https://github.com/liaoliao666/v2ex/blob/main/screens/MemberDetailScreen.tsx
    jinliming2
        16
    jinliming2  
       282 天前 via iPhone
    @iliaoliao 是 twitter 的手机端吗? iOS App 的 header 很简单啊,下拉就就跟着下来,上滑就上去,react 官方文档的 Animated 里都有那个的示例的啊?最多就是加个阈值延迟
    iliaoliao
        17
    iliaoliao  
       282 天前
    @jinliming2 官网上示例我找不到,是多个 scrollView 的吗。
    其实如果你能实现的话可以考虑整个开源项目,我直接用你的。不整的话等我我闲下来估计也会做个这种开源,应该会有不少 star😂。
    mouyase
        18
    mouyase  
    OP
       281 天前
    @AvilCore expo 现在的兼容性如何?和原生的库/组件的兼容性好吗?因为公司有业务要接原生的代码库,不知道好不好迁移。
    mouyase
        19
    mouyase  
    OP
       281 天前
    @jinliming2 大佬是真的牛!这个应该就是想要实现出来的效果了,正在看源码学习中。
    Cookmilk
        20
    Cookmilk  
       78 天前 via iPhone
    @jinliming2 大佬我给你发邮件了,可否看一下。
    @iliaoliao
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1791 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 16:33 · PVG 00:33 · LAX 08:33 · JFK 11:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.