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

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>

我应该使用其他导航吗？ 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
  }

Answer 1

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

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

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

Can't change native base tabs' height

reactjs

react-native

native-base

react-navigation