Динамически изменить нижний значок навигации на основе значка навигации в ящике

Question

Я хочу динамически изменить значок значка нижней вкладки на значок страницы ящика, на который я изменяю. Когда откроется ящик и я выберу карточку, я хочу, чтобы значок платежа сменился с money на cards. Можно ли этого достичь? спасибо

нижняя вкладка

const bottomtab = createBottomTabNavigator(
{
    home: {
        screen: home,
        navigationOptions: {
            tabBarIcon: ({ tintColor, focused }) => <Icon name="home" color={tintColor} focused={focused} size={30} />,
        },
    },

    payment: {
        screen: paymentdrawerstack,
        navigationOptions: ({ navigation }) => {
            return{
                tabBarIcon: ({ tintColor }) => <Icon name="money" color={tintColor} size={20} />,
            }

        },
    },
},

выдвижной ящик

const paymentdrawerstack = createDrawerNavigator(
{
    balance: {
        screen: balance,
        navigationOptions: ({ navigation }) => {
            return{
                drawerIcon: ({ tintColor, focused }) => (
                    <Icon name="money" color={tintColor} focused={focused} size={20} />
                ),
                drawerLabel: 'balance',

            }

        },

    },
    cards: {
        screen: cards,
        navigationOptions: ({ navigation }) => {
            return{
                drawerIcon: ({ tintColor, focused }) => (
                    <Icon name="cards" color={tintColor} focused={focused} size={20} />
                ),
                drawerLabel: 'cards',

            }

        },

    },

Answer 1

Попробуйте, используйте эту функцию, чтобы получить активный маршрут:

const getActiveRoute = route => {
    if (!route.routes || route.routes.length === 0 || route.index >= route.routes.length) {
        return route.routeName;
    }

    const childActiveRoute = route.routes[route.index];
    return getActiveRoute(childActiveRoute);
}

А затем в navigationOptions из payment проверьте, что такое активный маршрут, измените значок соответствующим образом, например, так:

payment: {
  screen: paymentdrawerstack,
  navigationOptions: ({ navigation }) => {
    const name = getActiveRoute(navigation.state) === 'cards' ? 'cards' : 'money';
    return {
      tabBarIcon: ({ tintColor }) => <Icon name={name} color={tintColor} size={20} />,
    }
  },
},