Expo使用expo-router时TabBar激活状态图标颜色不更新问题

我在Expo应用中使用expo-router进行导航，遇到TabBar激活状态下图标颜色不改变的问题。已在Tabs组件的screenOptions中设置了tabBarActiveTintColor和tabBarInactiveTintColor，且为每个Tabs.Screen配置了tabBarIcon，但无论标签是否激活，图标颜色始终保持一致。

相关代码片段：

import { Tabs } from "expo-router"
import { Feather } from '@expo/vector-icons';
import { AntDesign } from "@expo/vector-icons";
export default () => {
    
    return (
      // <Stack>
      <Tabs
        screenOptions={{
          tabBarActiveTintColor: "#FF6464",
          tabBarInactiveTintColor: "#000",
        }}
      >
        <Tabs.Screen
          name="EmergencyContacts"
          options={{
            tabBarIconStyle: { color: "#FF6464" },
            tabBarIcon: ({ color, size }) => (
              <AntDesign name="contacts" size={24} color="black" />
            ),
            title: "Contacts",
            headerTitleAlign: "center",
            headerTitle: "Emergency Contacts",
            headerStyle: { backgroundColor: "#FF6464" },
            headerTintColor: "#fff",
          }}
        />
        <Tabs.Screen
          name="settings"
          options={{
            tabBarIcon: ({ color, size }) => (
              <Feather name="settings" size={24} color="black" />
            ),
            title: "Settings",
            headerTitleAlign: "center",
            headerTitle: "Settings",
            headerStyle: { backgroundColor: "#FF6464" },
            headerTintColor: "#fff",
          }}
        />
      </Tabs>
      // </Stack>
    );
}

我尝试过的操作：

• 在screenOptions中指定tabBarActiveTintColor和tabBarInactiveTintColor
• 单独设置tabBarIconStyle

核心问题 #

你在tabBarIcon的图标组件中硬编码了color="black"，直接覆盖了expo-router根据TabBar状态自动传入的color参数，导致激活/非激活状态的颜色切换失效。

修正步骤 #

1. 移除图标组件中硬编码的color属性，改用tabBarIcon回调函数传入的color参数
2. 删除固定颜色的tabBarIconStyle配置，避免干扰状态颜色切换

修正后的代码 #

import { Tabs } from "expo-router"
import { Feather } from '@expo/vector-icons';
import { AntDesign } from "@expo/vector-icons";
export default () => {
    
    return (
      <Tabs
        screenOptions={{
          tabBarActiveTintColor: "#FF6464",
          tabBarInactiveTintColor: "#000",
        }}
      >
        <Tabs.Screen
          name="EmergencyContacts"
          options={{
            tabBarIcon: ({ color, size }) => (
              <AntDesign name="contacts" size={size} color={color} />
            ),
            title: "Contacts",
            headerTitleAlign: "center",
            headerTitle: "Emergency Contacts",
            headerStyle: { backgroundColor: "#FF6464" },
            headerTintColor: "#fff",
          }}
        />
        <Tabs.Screen
          name="settings"
          options={{
            tabBarIcon: ({ color, size }) => (
              <Feather name="settings" size={size} color={color} />
            ),
            title: "Settings",
            headerTitleAlign: "center",
            headerTitle: "Settings",
            headerStyle: { backgroundColor: "#FF6464" },
            headerTintColor: "#fff",
          }}
        />
      </Tabs>
    );
}

额外优化建议 #

• 图标组件的size也改用回调传入的size参数，后续可通过screenOptions的tabBarIconSize统一调整所有图标大小，提升灵活性。

内容的提问来源于stack exchange，提问作者Abel Zeleke