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

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

使用tabContainerStyle道具<Tabs/>调整高度。同样的方法使用tabBarUnderlineStyle prop来设置选项卡指示器的样式。

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