NativeBase选项卡无法自定义borderBottomColor

时间:2018-04-11 15:20:23

标签: react-native tabs native-base

我有几个标签定义如下:

<Tabs renderTabBar={() => <ScrollableTab />}>
      <Tab heading="Tab1" tabStyle={styles.tabStyling} activeTabStyle={styles.activeTabStyle} textStyle={styles.tabTextStyle} activeTextStyle={styles.activeTabTextStyle} />
      <Tab heading="Tab2" tabStyle={styles.tabStyling} activeTabStyle={styles.activeTabStyle} textStyle={styles.tabTextStyle} activeTextStyle={styles.activeTabTextStyle} />
      <Tab heading="Tab3" tabStyle={styles.tabStyling} activeTabStyle={styles.activeTabStyle} textStyle={styles.tabTextStyle} activeTextStyle={styles.activeTabTextStyle} />
      <Tab heading="Tab4" tabStyle={styles.tabStyling} activeTabStyle={styles.activeTabStyle} textStyle={styles.tabTextStyle} activeTextStyle={styles.activeTabTextStyle} />
      <Tab heading="Tab5" tabStyle={styles.tabStyling} activeTabStyle={styles.activeTabStyle} textStyle={styles.tabTextStyle} activeTextStyle={styles.activeTabTextStyle} />
</Tabs>

以下风格:

const styles = StyleSheet.create({
  tabStyling: {
    backgroundColor: '#37b372'
  },
  activeTabStyle: {
    backgroundColor: '#37b372',
    borderColor: 'white',
    borderBottomColor: 'red'
  },
  tabTextStyle: {
    color: 'black'
  },
  activeTabTextStyle: {
    fontWeight: 'bold',
    color: 'white',
    fontSize: 20
  }
});

activeTabStyle上,我已定义borderBottomColor: 'red',但它仍然给我默认的蓝色

enter image description here

以下是NativeBase

的界面
interface Tab {
  heading: React.ReactElement<TabHeading> | string;
  tabStyle?:ReactNative.ViewStyle | Array<ReactNative.ViewStyle>;
  activeTabStyle?: ReactNative.ViewStyle | Array<ReactNative.ViewStyle>;
  textStyle?: ReactNative.TextStyle;
  activeTextStyle?: ReactNative.TextStyle;
}

所以activeTabStyle应该只是基本的ReactNative.ViewStyle

1 个答案:

答案 0 :(得分:1)

最好的方法是使用tabBarUnderlineStyle Tabs,因为它是Tab的属性,而不是<Tabs tabBarUnderlineStyle={{ backgroundColor: 'YOUR_SAMPLE_COLOR' }} renderTabBar={() => <ScrollableTab /> }> {... // Rest of the data} </Tabs>

例如

 activeTabStyle: {
    backgroundColor: '#37b372',
    borderColor: 'white',
    borderBottomColor: 'red',
    borderBottomWidth: 10
  },

另外需要注意的是,您的样式正在应用,但它隐藏在默认边框下方。 要注意它,您可以添加

 <title-group>
   <article-title>
      Acetylcholinesterase-Inhibiting Activity of Pyrrole Derivatives from a Novel Marine Gliding Bacterium,
     <italic>Rapidithrix thailandica</italic>
   </article-title>
 </title-group>
 .
 .
 same is for abstract...