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

Question

如何通过删除 'tabBarOptions' 部分来更改活动图标的颜色并且一切仍然有效？

浏览我前段时间在教程中制作的应用程序时，我在控制台中遇到了这个警告：

底部选项卡导航器：'tabBarOptions' 已弃用。将选项迁移到 'screenOptions'。在代码的 'screenOptions' 中放置以下内容以保持当前行为：

阅读了React Navigation offers about Bottom Tabs Navigation的信息，我设法通过以下方式解决了错误。

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

但是，在我的应用程序中，我想在浏览屏幕时更改按钮的颜色，我们所在屏幕的图标以不同的颜色显示，当时代码是如下所示，这就是它向我显示警告的原因。问题是我不知道如何纠正这个

这是我文件的完整代码

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

正如我已经说过的，我可以通过以下方式解决它，但我不知道如何添加所需的颜色以及如何在图标激活时改变它：

这会删除警告，但我无法更改颜色：如何通过删除 'tabBarOptions' 部分来更改活动图标的颜色并且一切仍然有效？

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

像这样向 screenOptions 添加 tabBarInactiveTintColor 和 tabBarActiveTintColor 选项：

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

Answer 2

如果您只想更改图标颜色，而不是文本颜色，那么您可以在 tabBarIcon 中使用 'focused'。

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

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

How can I override tabBarOptions and change the color of the navigation icons?

javascript

reactjs

react-native

react-navigation-stack

react-navigation-bottom-tab