gpt4 book ai didi

javascript - react native : Animate shrinking header with tabs

转载 作者:行者123 更新时间:2023-12-03 03:23:24 25 4
gpt4 key购买 nike

目标

我正在尝试创建一个带有动画收缩标题的 View ,其中包含带有滚动内容的选项卡的选项卡 View 。请参阅图片。

设置

我正在使用带有 TabNavigator 的 react 导航。 header 是一个具有固定高度的组件,当前位于 TabNavigator 上方。标题始终固定在选项卡上方,占用宝贵的空间。

尝试过的方法

  • 我已经尝试过Janic Duplessis Blog Post但由于标签的原因我无法让它工作。

  • 我还尝试使用两个 ScrollView/FlatList 来实现它:一个包裹整个 View ,一个包裹内容,但我无法做出 native react 来传播到达滚动边缘。

所需效果与 Google Play 商店中的效果相同。

Mobile Screenshot Google play

最佳答案

我设法用 Animated.diffClamp 实现了这一点 - 你可以查看代码 here 。我写了一篇文章更详细地解释了代码 here

*我使用 UI 组件的 native-base 包(以简化 UI 代码),但无论有没有它,动画插值/定义都是相同的。

Demo

关于javascript - react native : Animate shrinking header with tabs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44071308/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com