How to change the backgroundColor of a TabNavigator in React-Native

1
class TelaInicial extends Component {
    static navigationOptions = ({ navigation }) => ({
        tabBarLabel: 'Trevo',
        tabBarOptions: {
            activeTintColor: '#fff',
            inactiveTintColor: '#eee',
            showIcon: true,
            showLabel: true,
            animationEnabled: false,
            lazyLoad: true,
            upperCaseLabel: false,
        }
    })

I made this block, but it continues with default default colors.

    
asked by anonymous 10.11.2018 / 06:00

1 answer

0

You can use the style property within tabBarOptions to set backgroundColor to your tabBar, as shown in react-navigation documentation.

class TelaInicial extends Component {
    static navigationOptions = ({ navigation }) => ({
        tabBarLabel: 'Trevo',
        tabBarOptions: {
            activeTintColor: '#fff',
            inactiveTintColor: '#eee',
            showIcon: true,
            showLabel: true,
            animationEnabled: false,
            lazyLoad: true,
            upperCaseLabel: false,
            style: { //Adição do style
                backgroundColor: '#00ff00', // Aplicando a cor ao background
            }
        }
    })
}
    
12.11.2018 / 15:56