我有几个标签定义如下:
<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'
,但它仍然给我默认的蓝色
以下是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
答案 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...