activeTintColor 在反应导航中不改变图标颜色

Question

    HomeStack.navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({ focused }) => (
        <TabBarIcon
            focused={focused}
            name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'}

        />
    ),
    tabBarOptions: {
        activeTintColor: '#cd077d',

    },
};

我正在尝试更改TabBarIcon的颜色我尝试了 ActiveTintColor 但这似乎只是更改了文本颜色而不是图标颜色，它当前处于活动状态时默认为蓝色。

Answer 1

尝试这个

  HomeStack.navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({focused, tintColor }) => (
        <TabBarIcon
            focused={focused}
            name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'}
            tintColor={{ tintColor }}

        />
    ),
    tabBarOptions: {
        activeTintColor: '#cd077d',

    },
};

Answer 2

在我自己遇到这个问题之后，我发现这里的所有答案都没有多大帮助，因为主要问题只是道具的命名。您所需要做的就是将 prop 传递color到 Icon 中。它将采用activeTintColor或 ，inactiveTintColor具体取决于它是否处于活动状态。

    HomeStack.navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({ focused, color }) => (
        <TabBarIcon
            focused={focused}
            name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'}
            color={color}
        />
    ),
    tabBarOptions: {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
    },
};

正如文档打算展示的那样。

另请记住，Bottom Tabs Navigator和之间存在差异Material Bottom Tabs，因为两者都是由react-navigation 5.xx提供的

作者和我使用的示例是底部选项卡导航器。