Question

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

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

    },
};

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

Answer 1

在react-navigation版本中：5.x

providing-a-custom-drawercontent

    <Drawer.Screen name="settingscreen" component={Settings}
            options={{
                drawerLabel: "Settings",
                drawerIcon: ({ color }) => <MaterialCommunityIcons name="settings" size={24} style={[styles.icon, { color: color }]} />
            }}
        />

Answer 2

尝试一下

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

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

    },
};

Answer 3

您是否可以设置返回的TabBarIcon组件的颜色？看看官方文档中的tintColor：https://reactnavigation.org/docs/en/tab-based-navigation.html

    export default createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
);

Answer 4

在我自己遇到这个问题之后，我发现这里的所有答案都没有多大帮助，因为主要问题只是道具的命名。您所需要的只是将 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',
    },
};

正如docs打算展示的那样。

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

作者和我使用的示例是底部标签导航器。

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

4 个答案: