我在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模拟器中呈现时的样子
我希望黄色下划线为RED下划线。但我声明红色下划线的tabBarSelectedItemStyle
规则未得到承认。如何将所选标签栏项的下划线设为红色?
答案 0 :(得分:18)
要设置TabNavigator所选项目指示器的样式,您可以使用indicatorStyle
。
indicatorStyle - 标签指示器的样式对象(标签底部的行)。
示例强>
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);