如何覆盖 tabBarOptions 并更改导航图标的颜色？

Question

How can I change the colors of the icons that are active by removing the 'tabBarOptions' part and everything still works?

Going through an app I made some time ago in a tutorial, I came across this warning in the console:

Bottom Tab Navigator: 'tabBarOptions' is deprecated. Migrate the options to 'screenOptions' instead. Place the following in 'screenOptions' in your code to keep current behavior:

Reading the information that React Navigation offers about Bottom Tabs Navigation , I have managed to solve the error in the following way.

<Tab.Screen
          name="restaurants"
          component={RestaurantsStack}
          options={{
            title: "Restaurants",
            headerShown: false,
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons
                name="magnify"
                color={color}
                size={size}
              />
            ),
          }}
        />

However, in my application, I want to change the color of the buttons when we navigate through the screens, the icon of the screen we are on is shown in a different color, and at the time the code was the one shown below, and it is That's why it shows me the warning. The problem is that I don't know how I can correct this

This is the full code of my file

const Tab = createBottomTabNavigator()

export default function Navigation() {
  const screenOptions = (route, color) => {
    let iconName
    switch (route.name) {
      case "tiendas":
        iconName = "compass-outline"
        break;
      case "favorites":
        iconName = "heart-outline"
        break;
      case "top-tiendas":
        iconName = "star-outline"
        break;
      case "search":
        iconName = "magnify"
        break;
      case "account":
        iconName = "home-outline"
        break;
    }

    return (
      <Icon
        type="material-community"
        name={iconName}
        size={22}
        color={color}
      />
    )
  }

  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="tiendas"
        tabBarOptions={{
          inactiveTintColor: "#f48b28",
          activeTintColor: "#633204"
        }}
        screenOptions={({ route }) => ({
          tabBarIcon: ({ color }) => screenOptions(route, color)
        })}
      >
        <Tab.Screen
          name="tiendas"
          component={tiendasStack}
          options={{
            title: "Tiendas",
            headerShown: false
          }}
        />
        <Tab.Screen
          name="favorites"
          component={FavoritesStack}
          options={{
            title: "Favoritos",
            headerShown: false
          }}
        />
        <Tab.Screen
          name="top-tiendas"
          component={ToptiendasStack}
          options={{
            title: "Top 10",
            headerShown: false,
          }}
        />
        <Tab.Screen
          name="search"
          component={SearchStack}
          options={{
            title: "Buscar",
            headerShown: false,
          }}
        />
        <Tab.Screen
          name="account"
          component={AccountStack}
          options={{
            title: "Cuenta",
            headerShown: false,
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

As I already said, I could solve it in the following way, but I don't know how to add the desired color and how to make it change when the icon is active:

This removes the warning, but I can't change the colors: How can I change the colors of the icons that are active by removing the 'tabBarOptions' part and everything still works?

const Tab = createBottomTabNavigator()

export default function Navigation() {

  // Navigation buttons
  return (
    <NavigationContainer>
      <Tab.Navigator >
        <Tab.Screen
          name="tiendas"
          component={TiendasStack}
          options={{
            title: "Tiendas",
            headerShown: false,
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons
                name="magnify"
                color={color}
                size={size}
              />
            ),
          }}
        />
        <Tab.Screen
          name="favorites"
          component={FavoritesStack}
          options={{
            title: "Favoritos",
            headerShown: false,
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons
                name="heart-outline"
                color={color}
                size={size}
              />
            ),
          }}

        />
        <Tab.Screen
          name="top-tiendas"
          component={TopTiendasStack}
          options={{
            title: "Top 5",
            headerShown: false,
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons
                name="star-outline"
                color={color}
                size={size}
              />
            ),
          }}
        />
        <Tab.Screen
          name="search"
          component={SearchStack}
          options={{
            title: "Buscar",
            headerShown: false,
            tabBarIcon: ({ color, size }) => (
               <MaterialCommunityIcons
                 name="magnify"
                 color={color}
                 size={size}
               />
             ),
          }}
        />
        <Tab.Screen
          name="account"
          component={AccountStack}
          options={{
            title: "Cuenta",
            headerShown: false,
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons
                name="home-outline"
                color={color}
                size={size}
              />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

Answer 1

if you want to change only Icons color, not text color, then you can use 'focused' in tabBarIcon.

tabBarIcon: ({focused, color, size }) => (
              <MaterialCommunityIcons
                name="magnify"
                color={focused ? focusedColor : color}
                size={size}
              />
            )

Answer 2

Add tabBarInactiveTintColor and tabBarActiveTintColor options to screenOptions like that:

<Tab.Navigator
        initialRouteName="tiendas"
        screenOptions={({ route }) => ({
          tabBarInactiveTintColor: "#f48b28",
          tabBarActiveTintColor: "#633204"
        })}
 >...</Tab.Navigator>