Obtenez l'itinéraire actuel de l'écran actif du navigateur d'onglets dans React Navigation

Voici ma pile de navigation utilisant la navigation de réaction v3.2.1 :

1. J'ai un commutateur de navigateur pour passer à la pile de navigation d'authentification et à la pile d'applications authentifiées.

2. La pile d'applications est créée à l'aide d'un navigateur à onglet inférieur.

3. Je souhaite utiliser un composant personnalisé pour le navigateur d'onglets.

Comment puis-je obtenir le nom de route actuel du navigateur d'onglets lorsque vous utilisez createBottomTabNavigator et un tabBarComponent personnalisé .

Par exemple:

1. Supposons que la pile de navigation par onglets comporte 2 écrans de navigation, c'est-à-dire Accueil et Chat.
2. Dans le BottomBar personnalisé, comment puis-je vérifier si le nom de route ciblé / actif / actuel est Accueil / Chat afin de pouvoir modifier le style des icônes respectivement?

AppContainer.js

export default class IconComponent extends React.Component {
    constructor(props) {
        super(props)
    }

    ...

    render() {
        let IconComponent
        let iconName
        let iconSize = 25
        switch (this.props.routeName) {
            case 'Home':
                IconComponent = MaterialCommunityIcons
                // iconName = `home${focused ? '' : '-outline'}`;
                iconName = `home`;
                break
            case 'Chat':
                IconComponent = AntDesign
                iconName = `message1`
                iconSize = 22
                break
        }

        let tintColor = 'green'

        // if focused Home is current tab screen then change style eg. tint color.
        // similary if current tab screen is Chat, then change style.

        return (
                <Animated.View
                    style={[
                        styles.container,
                        {
                            opacity: this.opacity
                        }
                    ]}
                >
                    <IconComponent name={iconName} size={iconSize} color={tintColor}/>
                </Animated.View>
        )
    }
}

AppStack.js

export default class BottomBar extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <View style={styles.container}>
                <IconComponent routeName={'Home'}/>
                <IconComponent routeName={'Chat'}/>
            </View>
        )
    }
}

BottomBar.js

const AppStack = createBottomTabNavigator({
    Home: {
        screen: HomeStack,
    },
    Chat: {
        screen: ChatStack
    },
}, {
    initialRouteName: 'Home',
    activeColor: '#f0edf6',
    inactiveColor: '#3e2465',
    shifting: false,
    barStyle: {
        backgroundColor: '#694fad',
    },
    labeled: false,
    tabBarComponent: ({navigation}) => <BottomBar navigation={navigation}/>
})

export default AppStack

IconComponent.js

const switchStack = createSwitchNavigator({
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack
}, {
    initialRouteName: 'AuthLoading',
})

export default createAppContainer(switchStack)