react-native ScrollHeadTabView

效果:tab视图切换,头部视图可以随着每个子tab滚动,TabBar到达一定滑动距离吸附在顶部。

react-native开发者几乎都接触过react-native-scrollable-tab-view,这是一个很优秀的组件,可以实现tab切换效果,既然叫做ScrollHeadTabView,肯定是跟它脱不了干系。

因为我们只需在其上增加头部视图滚动、TabBar吸附的效果,个人觉得没必要再费力气去做别人已经做得很好的事情了,因此就基于scrollable-tab-view来完成我们的ScrollHeadTabView。

首先我们需要熟悉scrollable-tab-view的核心代码,主要是state更新和tab渲染这部分。我们需要自己添加ScrollHeader,以及可吸附的TabBar。

准备工作,我把scrollable-tab-view的代码整理成了更好阅读的Class。

1610294190000image.png

先添加可滚动头部:

1610294259000image.png

header的高度由外部计算headerHeight,内部的核心是处理containerOffsetY来控制头部上下平移。

1610294023000image.png

修改了_composeScenes(处理每个tab视图的方法),我们给每个tab传递了额外的参数,最核心的是containerOffsetY和sceneHeight。

1610294580000image.png

每个Tab是这样使用这些参数的,sceneHeight给那些内容不足容器高度计算底部padding,当前Tab滑动时改变containerOffsetY的值。

1610295022000image.png

因为上面这些UI处理逻辑对于每个Tab来说都是相同的,因此添加了处理Flatlist、ScrollView等视图的HOC。

要具备滑动头部和吸附TabBar,必须用HOC处理过的Flatlist、ScrollView。

1610295420000image.png

使用方式:example

1610295705000image.png

最后是实现TabBar吸附,这个同样也是用到了containerOffsetY来实现平移动画效果。

1610295800000image.png

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

被以下专题收入,发现更多相似内容