Tabview 在 react-native 中作为粘性标题

Posted 2023-03-11

【中文标题】Tabview 在 react-native 中作为粘性标题

【英文标题】：Tabview as sticky header in react-native

【发布时间】：2017-07-17 11:25:48

【问题描述】：

我在 react native.ie React-native-tab-view 中为 tabview 使用了一个第三方库。我需要将此选项卡视图创建为表格视图中的粘性标题。下面正是我需要的。当我滚动页面时，横幅会上升，但那 3 个选项卡仍位于顶部。请问有人可以帮忙吗？

【问题讨论】：

没有。仍在努力实现它

唯一的区别是我使用tab

你在使用 react-navigation 吗？如果是这样，您可以使用 StackNavigator 并作为孩子使用 TabNavigator。然后你可以订阅你的 scrollView 的 onScroll 事件，并在你向下滚动时为 StackNavigator 的标题的高度设置动画。

@JanPeter 我试过了，但可能没有让你正确，你能提供示例或链接代码吗

好吧，我可以试着自己写一个例子。不知道有没有这方面的教程。不过你得等一会儿^^

【参考方案1】：

我在Github 上创建了一个示例项目。它应该可以解决问题。我使用了原生动画，所以我只能为变换和不透明度设置动画，这应该很快。问题之一是嵌套导航器未连接，但您应该能够做到这一点。没那么难:P

现在，即使您切换选项卡也会显示横幅，这可能不是您想要的行为。但我认为总的来说，这个 repo 给了你一个很好的起点。至少我希望如此:)

如果您想知道如何在导航器之间嵌套视图，您可以查看Github 上的第二个 repo，我今天为另一个 SO 问题制作。也许我会写一篇关于这个主题的 Medium 帖子。我想这取决于我的业余时间：P

【讨论】：

哇，太酷了@Jan Peter。我感谢你的努力。谢谢

我用第二个存储库编辑了上面的答案，您可以在其中查找如何正确连接嵌套导航器:)

@JanPeter，您的解决方案对我帮助很大。你能告诉我如何控制滚动加速吗？头部部分和向下部分没有同时加速。我怎样才能做到这一点？