使用 expo-router 在 Expo 中活动时 TabBar 图标颜色不改变的问题

Question

我在 Expo 应用程序中使用

expo-router

进行导航，并遇到 TabBar 的问题，即图标颜色在活动时不会更改。我已在

Tabs.Screen

中使用指定的

tabBarIcon

和

tabBarActiveTintColor

设置了

screenOptions

组件，但无论其处于活动状态还是非活动状态，图标颜色都保持不变。

以下是相关代码片段：

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>
    );
}

我尝试在

tabBarActiveTintColor

中指定

tabBarInactiveTintColor

和

screenOptions

，并单独设置

tabBarIconStyle

的样式，但当选项卡处于活动状态时，图标颜色不会改变。

任何关于如何在 Expo 中使用

expo-router

活动时正确更改 TabBar 图标颜色的见解或建议将不胜感激！

我为 Tabs 组件配置了 screenOptions，将 tabBarActiveTintColor 设置为“#FF6464”，并为每个 Tabs.Screen 指定 tabBarIcon。此外，我尝试使用 tabBarIconStyle 根据选项卡的活动修改图标颜色。

Answer 1

我看到您在 Tabs.Screen 组件的 options 中使用了静态颜色。

尝试更改如下代码：

tabBarIcon: ({ color, size }) => (
    <AntDesign name="contacts" size={24} color={color} />
)