Wie ändert man die Farbe der aktiven/ausgewählten Registerkarte?

Question

Ich konnte keine Möglichkeit finden, die Farbe des Titels in der Tableiste zu ändern. Dies ist mein Code:

Home:{ 
screen: TabNavigator({ 
    Home: { 
    screen: HomeScreen, 
    navigationOptions: ({ navigation }) => ({ 
     title: 'Home', 
     tabBarIcon: ({ tintColor, focused }) => (
     <Ionicons 
     name={focused ? 'ios-home' : 'ios-home-outline'} 
     size={26} 
     style={{ color: focused ? `${tabBarColor}` : tintColor}} 
     /> 
    ), 
     //headerStyle: {backgroundColor: "#553A91"}, 
     //headerTitleStyle: {color: "#FFFFFF"}, 
     header: null, 
    }), 
    }, 
    Profile: { 
    screen: ProfileScreen, 
    navigationOptions: ({ navigation }) => ({ 
     title: 'Profile', 
     tabBarIcon: ({ tintColor, focused }) => (
     <Ionicons 
     name={focused ? 'ios-people' : 'ios-people-outline'} 
     size={26} 
     style={{ color: focused ? `${tabBarColor}` : tintColor }} 
     /> 
    ), 
     //headerStyle: {backgroundColor: "#553A91"}, 
     //headerTitleStyle: {color: "#FFFFFF"}, 
     header: null, 
    }), 
    }, 
}), 
} 

ich gesucht, aber konnte keinen Weg dies zu tun finden. Ich möchte die Farbe die Standardfarbe grau sein, wenn die Registerkarte nicht ausgewählt ist, aber meine tabBarColor Farbe, wenn die Registerkarte ausgewählt ist.

Wie kann ich das tun?

Vielen Dank im Voraus!

Answer 1

Nicht sicher, wo Sie gesucht haben, aber es dauerte 30 Sekunden, um es zu sehen.

In TabNavigator Docs, ist es klar, dass man activeTintColor

activeTintColor verwenden müssen: Etiketten- und Symbolfarbe des aktiven Tab

Beispiel:

const MyApp = TabNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    Notifications: { 
    screen: MyNotificationsScreen, 
    }, 
}, { 
    tabBarOptions: { 
    activeTintColor: '#e91e63', 
    }, 
});