更改所选标签栏项目的底部边框颜色 [英] Change bottom border color of selected tab bar item
问题描述
我在 react-native 中有以下代码
I have the following code in react-native
import React, {Component} from 'react';
import {TabNavigator} from 'react-navigation';
import {View} from 'react-native';
class Home extends Component {
static navigationOptions = {
title:'Home',
tabBarLabel:'First'
};
render() {
return <View></View>;
}
}
const tabOptions = {
tabBarOptions: {
activeTintColor:'white',
inactiveTintColor:'#D3D3D3',
style:{
backgroundColor:'green',
borderTopWidth:1,
borderTopColor:'#D3D3D3'
},
tabBarSelectedItemStyle: {
borderBottomWidth: 2,
borderBottomColor: 'red',
},
},
}
const ProductNavigator = TabNavigator({
First: {screen: Home},
Second:{screen: Home}
},
tabOptions
);
export default ProductNavigator;
这是在 Android 模拟器中呈现时的样子
This is what it looks like when rendered in Android emulator
我希望黄色下划线改为红色下划线.但是我对 tabBarSelectedItemStyle
声明红色下划线的规则没有得到承认.如何使选定标签栏项目的下划线变为红色?
I want the yellow underline to be RED underline instead. But my rules for tabBarSelectedItemStyle
that declare a red underline are not being acknowledged. How do I make the underline of selected tab bar items to be red?
推荐答案
要设置 TabNavigator 所选项目的指示器的样式,您可以使用 indicatorStyle
.
To style TabNavigator selected item's indicator you can use indicatorStyle
.
indicatorStyle - 标签指示器的样式对象(标签底部的线).
indicatorStyle - Style object for the tab indicator (line at the bottom of the tab).
示例
const tabOptions = {
tabBarOptions: {
activeTintColor:'white',
inactiveTintColor:'#D3D3D3',
style:{
backgroundColor:'green',
borderTopWidth:1,
borderTopColor:'#D3D3D3'
},
indicatorStyle: {
backgroundColor: 'red',
},
},
}
const ProductNavigator = TabNavigator({
First: {screen: Home},
Second:{screen: Home}
}, tabOptions);
这篇关于更改所选标签栏项目的底部边框颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!