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

时间:2017-11-17 05:53:35

标签: reactjs react-native react-navigation native-base

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

enter image description here

我正在使用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 个答案:

答案 0 :(得分:7)

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

tabBarUnderlineStyle