createMaterialTopTabNavigator 在 ScrollView 中，具有动态高度

Question

有什么方法可以创建具有动态高度的 ScrollView 之类的东西？

关于我们正在尝试做的事情的详细信息：

我们创建了一个顶级标签栏（使用createMaterialTopTabNavigator中的）ScrollView。一切正常，除了 ScrollView 的高度。Let's assume there are 3 tab screens with different heights: TabScreen1: 800, TabScreen2: 400, TabScreen3: 300... At rendering, the ScrollView takes the greatest height, and when Tab2 or 3 is selected, the height of our ScrollView remains at 800，所以在 Tab2 和 3 中有空的滚动空间。

Answer 1

正如我所承诺的，这就是我们解决它的方法。

在你拥有你的班级中，ScrollView你需要一个像

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

以后，您希望每次更改选项卡时都更改该状态：

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

现在，每次未选择选项卡或未聚焦时，它都会显示 DefaultScreen，它是一个空视图并且没有高度，例如：

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