如何在 ScrollView 中放置 createMaterialTopTabNavigator?

问题描述 投票:0回答:0

我正在使用 React Native(裸机,不是 Expo)。我正在尝试将

createMaterialTopTabNavigator
放在
ScrollView
中。我之所以要这样做是因为在选项卡的顶部会有一个包含手风琴的标题,按下它可以展开并显示更多内容,因此它具有动态高度。

这是更多上下文的屏幕截图:

这是我尝试过的:

const Tab = createMaterialTopTabNavigator();

export default function MyNavigator() {
  const [isAccordionExpanded, setIsAccordionExpanded] = useState(false);

  return (
    <ScrollView style={{flex: 1}}>
      <CustomAccordion
        title={<Text>Accordion title</Text>}
        data={<Text>Accordion content when expanded</Text>}
        onToggleExpand={() => setIsAccordionExpanded(!isAccordionExpanded)}
        isExpanded={isWalletExpanded}
      />
      <Tab.Navigator>
        <Tab.Screen name="Tab1" component={Tab1} />
        <Tab.Screen name="Tab2" component={Tab2} />
        <Tab.Screen name="Tab3" component={Tab3} />
      </Tab.Navigator>
    </ScrollView>
  );
}

问题是,当我将导航器放在

ScrollView
中时,选项卡屏幕中的内容消失了(就像我在上面分享的图片中显示的那样)。如果我用
ScrollView
替换
View
,内容确实会出现,但是手风琴组件和选项卡之间有很大的空白空间,我假设因为手风琴高度是动态的所以它增加了额外的空间来扩展.

我该如何解决这个问题?

react-native react-navigation
© www.soinside.com 2019 - 2024. All rights reserved.