无法更改本机基本选项卡的高度

Question

标签工作正常.但是我不能<Tabs>像下面的图像那样改变下划线和高度

我正在使用Native-Base来处理标签.但我想不出任何改变其默认高度的方法.

<Tabs initialPage={0}
  tabBarUnderlineStyle={styles.tabBarUnderlineStyle}
  style={{height:40}}
>
  <Tab 
    heading="Following"
    tabStyle={styles.tabStyle}
    activeTabStyle={styles.activeTabStyle}
    activeTextStyle={styles.activeTextStyle}
    textStyle={styles.textStyle}
  >
    <FeedScreen navigation={this.props.navigation}/>
  </Tab>

我应该使用其他导航吗？原生基地很难定制.. :(

更新请求,我分享我的风格

  tabStyle : {
    // backgroundColor: theme.colors.navbar,
    backgroundColor: 'white',
    justifyContent: 'center',
    width: 120,
    height: 40,
  },
  activeTabStyle: {
    backgroundColor: 'white',
    height: 40,
  },
  textStyle: {
    // color: 'white',
    color: "#968D8A"
  },
  activeTextStyle: {
    // color: 'white',
    color: theme.colors.navbar
  },
  tabBarUnderlineStyle: {
    backgroundColor: theme.colors.navbar,
    height: 2
  }

Answer 1

使用tabContainerStyleprop <Tabs/>来调整高度.同样使用tabBarUnderlineStyleprop来设置选项卡指示器的样式.

<Tabs
      tabContainerStyle={{ height: 60 }}
      tabBarUnderlineStyle={{
        backgroundColor: "black",
        height: 5,
      }}
    />