使用动态内容反应原生自定义可滚动标签栏答案

【问题标题】：React Native Custom Scrollable Tabbar with Dynamic Content使用动态内容反应原生自定义可滚动标签栏
【发布时间】：2020-02-03 07:35:23
【问题描述】：

我想在 React Native 中创建一个标签栏，它具有以下特点：

按下按钮应在选项卡列表的末尾创建另一个选项卡。

我尝试了Native base Tabs，但我无法将按钮放在标签栏中。我也尝试使用React Navigation 来实现，但难以覆盖tabBarComponent，尤其是使用位置参数来可视化活动选项卡并在选项卡之间设置动画。

问题：如何在 React Native 中做到这一点？有什么例子吗？

【问题讨论】：

【解决方案1】：

我认为你可以使用scrollView 和TouchableOpacity(button)。

如果我制作你想要的，我会使用 Scrollview，所以我可以水平滚动。

并使用map 或其他东西在Scrollview 中添加按钮，这样就有我想要的按钮。（如果你只想要静态数量的按钮，只需添加按钮。）

如果你想去某个地方，只需在地图组件中添加功能即可。

另外，最后一个按钮，我在 Scrollview 中单独添加。

所以可以有简单的代码，例如，

<ScrollView horizontal={true}>
    {this.state.list.map((item, i) => (
        <TheButtonYouWant/>
    ))}
    <AddButtonYouWant/>
<ScrollView>

+已编辑

我没想过。我有个主意。您可以将屏幕一分为二。一是主屏幕，二是标签屏幕。

因此，当单击选项卡的某个组件时，通过更改 state 来显示索引屏幕。

它一定可以工作，但我不知道这是可视化你想要什么的最佳方式。

希望对你有帮助

【讨论】：

是的，我认为这可行。但缺少的一件事是选项卡之间的滑动效果：通常使用选项卡我可以左右滑动并在滑动期间查看其他选项卡视图。你怎么添加它？由于我认为这种手动 ScrollView 方法可能需要相当大的努力，是否有某种方法可以使用反应导航？
嗨，谢谢。我认为这会起作用，但它不会像真正的 tabview 那样具有相同的外观和感觉，您可以在滑动时滑动并查看相邻的标签内容。
@user2500558 我知道你想要什么。我认为你可以使用 react-native 的Animated。