无法更改本机基本标签的高度

Posted 2023-03-15

【中文标题】无法更改本机基本标签的高度

【英文标题】：Can't change native base tabs' height

【发布时间】：2017-11-17 05:53:35

【问题描述】：

选项卡工作正常。但是我不能像下图那样改变<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>

我应该使用其他导航吗？ native-base 定制起来很糟糕.. :(

更新应要求，我正在分享我的风格

  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
  

【问题讨论】：

你能分享你的风格吗。

当然我刚刚做了

【参考方案1】：

使用<Tabs/> 的tabContainerStyle 属性调整高度。同样的方式使用tabBarUnderlineStyle 属性来设置标签指示器的样式。

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

【讨论】：

它在普通组件中工作，但在底部可绘制组件中不工作