web-dev-qa-db-fra.com

Modifier la couleur de la bordure inférieure de l'élément de barre d'onglets sélectionné

J'ai le code suivant en natif réactif

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;

Voici à quoi il ressemble lorsqu'il est rendu dans Android emulator

enter image description here

Je veux que le soulignement jaune soit souligné ROUGE à la place. Mais mes règles pour tabBarSelectedItemStyle qui déclarent un soulignement rouge ne sont pas reconnues. Comment faire pour que le soulignement des éléments de la barre d'onglets sélectionnés soit rouge?

react-nativetabnavigator
7
John

Pour styliser l'indicateur de l'élément sélectionné TabNavigator, vous pouvez utiliser indicatorStyle .

indicatorStyle - Objet de style pour l'indicateur de tabulation (ligne en bas de l'onglet).

Exemple 

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