react-native - 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

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

在你的类(class)，你有你的 ScrollView你需要一个像

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

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

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

现在，每次未选择选项卡或未聚焦时，它都会显示 DefaultScreen，它是一个空 View 并具有 无高度喜欢:

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