在ScrollView内创建具有动态高度的MaterialTopTabNavigator [英] createMaterialTopTabNavigator inside ScrollView with dynamic height

问题描述

有没有办法创建具有动态高度的类似ScrollView的东西？

有关我们尝试执行的操作的详细信息：

我们在ScrollView中创建了一个顶部选项卡栏(使用createMaterialTopTabNavigator)。一切正常，除了ScrollView的高度。让我们假设有3个不同高度的选项卡屏幕：TabScreen1：800，TabScreen2：400，TabScreen3：300.渲染时，ScrollView的高度最大，当选择Tab2或Tab3时，ScrollView的高度保持为800，因此Tab2和Tab3中的滚动空间为空。

推荐答案

正如我承诺的那样，以下是我们解决该问题的方法。

在您的类中，您的ScrollView需要类似

的状态

const [activeTab, setActiveTab] = useState('tab1') //your default (first) tab

以后，您需要在每次更改选项卡时更改该状态：

<TabsStack.Screen
  name={'tab1'}
  component={
    activeTab === 'tab1' ? Tab1Screen : DefaultScreen
  }
  listeners={{ focus: () => setActiveTab('tab1') }}
/>

现在，每次取消选择选项卡，或者更确切地说，没有焦点时，它都会显示DefaultScreen，这是一个空视图，没有高度LIKE：

const DefaultScreen = () => (
  <Box
    flex={1}
    py={20}
    alignItems="center"
    justifyContent="center"
    bg="background"
  >
    <ActivityIndicator size="large" color="white" animating />
  </Box>
)

在我的情况下(请参见上面的问题)，每次我从Tab1.1.1切换到Tab1.1.2时，Tab1.1.1都会更改为DefaultScreen

这篇关于在ScrollView内创建具有动态高度的MaterialTopTabNavigator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！