React Native：使用动画创建自定义选项卡

Question

我有这个用例，与常规相比有点令人困惑，我不知道如何构建它。我有一个带有4个标签的屏幕（标签）。

事实是每个标签的内容（它们的屏幕）实际上是在一个大页面中，当向下滚动页面并且它到达Tab2的内容时，标签应该也改为Tab2（它实际上不是一个屏幕更改）。

现在我最初使用了react-navigation和tab navigator。但在这里我不确定这是否应该使用标签导航器。我遇到的问题（从头到尾）：

Q1）如果我们将组件（每个选项卡的屏幕）包装在父组件中。我们如何检测滚动到达的位置！ （或通知我们正在查看tab2内容的内容，等等......）

Q2）如何处理标签的动画（尤其是图像中所示的标签下方的线条）来回转换？

问题3）有没有更好的方法来做到这一点！ （比我上面的初步想法更好）

Answer 1

Q1。您必须使用TabNavigator来避免问题，因为您在第一季度提问。所以你不必担心Scroll。

Q2。我建议使用StyleSheet，为线条创建一个CSS样式，然后你可能需要调用一个函数来设置当前标签的CSS或使用navigation options。

Q3。 TabNavigator在这里是个不错的选择，它属于react-navigation。

TabNavigator

Animation example with custom function

---更新------ 我已经创建了一个示例项目供您解决问题，我不确定您是否也这样做。

1. 检查Scroll.js，我添加了一个Callme函数，当滚动到达结束时更改标签。
2. 为了检测Scroll到达是否结束，我使用了另一个StackOverflow应答中的isCloseToBottom。

按照以下链接访问Github项目。

Change-Tabs-When-Scroll-End

由于

_Pradeep