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的{{1}}中，检查活动路线是什么，相应地更改图标，如下所示：

payment

根据抽屉式导航图标动态更改底部导航图标

1 个答案: