更改所选标签栏项目的底部边框颜色答案

【问题标题】：Change bottom border color of selected tab bar item更改所选标签栏项目的底部边框颜色
【发布时间】：2018-04-12 00:05:41
【问题描述】：

我在 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 模拟器中渲染时的样子

我希望黄色下划线改为红色下划线。但是我对tabBarSelectedItemStyle 声明红色下划线的规则没有得到承认。如何使所选标签栏项目的下划线变为红色？

【问题讨论】：

标签： react-native tabnavigator

【解决方案1】：

您可以使用indicatorStyle 来设置 TabNavigator 选定项的指示器样式。

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);

【讨论】：