Question

当前行为

您正在运行什么代码以及正在发生什么？

我正在尝试创建一个类似Twitter中的个人资料页面，例如，它的标题包含有关用户及其头像的统计信息

然后有一个选项卡导航，例如在他的帖子和关于页面之间导航，然后将它们都包装在ScrollView中，同时将Header和Tab Navigato包裹起来，这会导致此问题->

假设我有“帖子”标签和“关于”标签，然后“帖子”标签的高度为800，“关于”的高度为400 然后，包装Tab导航器的ScrollView和Header的高度将为800 + Header的高度当我切换到“关于”标签时，它的高度仍为800 + 400，但由于某些原因，它也会重置标签的高度。因此，“关于”选项卡中的内容下方将有一个巨大的空白区域。

然后

我像这样使用CreateMaterialTopTabNavigator-

const TabNavigator = createMaterialTopTabNavigator();

const [activeTab, setActiveTab] = useState('Posts');
return (
    <TabNavigator.Navigator
        lazy
        tabBarPosition="top"
    >
    <TabNavigator.Screen
        name="Posts"
        component={Posts}
    />
    <TabNavigator.Screen
        name="About"
        component={About}
    />
</TabNavigator.Navigator>

然后我将其添加到滚动视图中，它看起来像这样

    <ScrollView style={{flex:1}}
        <Header/>
        <ProfileTabNavigator />
    </ScrollView>

在ScrollView内

现在什么是实现它的最佳方法，或者我该如何解决？我不知道该怎么办：（（

请添加屏幕截图或视频（如果有必要）。现在的情况 - 图片是从曾在StackExchange上发布了此问题，但也没有得到任何好的答案的人拍摄的。

Current Situation Picture

预期行为

您期望发生什么？为了能够在屏幕中间切换选项卡，同时在它们上方放置一个标题，以便ScrollView Height可以动态更改。

请添加屏幕截图或视频（如果有必要）。想要的结果-

Expected Result Picture 如何繁殖

您必须提供一种重现该问题的方法。如果您的机器或构建工具有问题，则该问题属于另一个存储库，因为它不在React Navigation的范围内。在Snack上重新创建错误，或使用可重现该错误的代码链接到GitHub存储库。说明如何运行示例应用程序以及从示例应用程序重现问题所需采取的所有步骤。保持再现代码尽可能简单，并以最少的代码再现问题。在报告问题之前，请确保您使用的是软件包的最新版本。您可以通过在滚动视图中包含MaterialTopBarNavigator来重现此问题，滚动视图中甚至是文本组件都位于其顶部。

屏幕中间的标签栏会响应本机导航

0 个答案: