如何在Tabs中放置多个项目并使其可滚动

Question

我有5个标签，如上例所示。

我的标签包含太多字母，超出了窗口的宽度（其中一个元素生成另一行）。选项卡的宽度始终是窗口宽度除以5（窗口宽度/ 5）。 所以我想让我的标签'元素滚动。通过滚动来查看标签上的所有元素。

我正在将native-base用于<Tabs>组件。

<ScrollView horizontal={true}>
    <Tabs initialPage={0}
          tabBarUnderlineStyle={styles.tabBarUnderlineStyle}>
          <Tab
            heading="FirstTab"
            tabStyle={styles.tabStyle}
            activeTabStyle={styles.activeTabStyle}
            activeTextStyle={styles.activeTextStyle}
            textStyle={styles.textStyle}>
            <FirstScreen clothes={this.props.tops} navigation={this.props.navigation}/>
          </Tab>
          <Tab

我认为我无法使用横向<ScrollView>，因为<FirstScreen>包裹<ScrollView>

let styles = RkStyleSheet.create(theme => ({
  tabStyle : {
    backgroundColor: 'white',
    justifyContent: 'center',
    width: 60, <---- This doesn't work either. It is always (window width)/5
    height: 40
  },

Answer 1

这有效!!

      <Tabs initialPage={0}
        tabBarUnderlineStyle={styles.tabBarUnderlineStyle}
        renderTabBar={()=> <ScrollableTab style={{height:40}}/>}>