如何在选项卡中放置多个项目并使它们可滚动

Question

我有 5 个选项卡，如上例所示。

我的标签有太多字母，它们超出了 window 的宽度（一个元素占另一行）。制表符的宽度始终是 window 的宽度除以 5（window 的 width/5）。所以我想让我的标签的元素可以滚动。通过滚动查看标签上的所有元素。

我正在为 <Tabs> 组件使用 native-base。

<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}}/>}>

如何在选项卡中放置多个项目并使它们可滚动

How to put multiple items in Tabs and make them scrollable

react-native

native-base