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

Question

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

通过一段时间以前在一个教程中进行的应用程序，我在控制台中遇到了此警告：

底部选项卡导航器：'Tabbaroptions'已弃用。将选项迁移到'ScreenOptions'而不是迁移。 将以下内容放入代码中以保持当前行为：

阅读 React 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

如果您只想更改图标颜色，而不是文本颜色，则可以在Tabbaricon中使用“聚焦”。

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

Answer 2

将tabbarinactivetintcolor和tabbaractivetintcolor选项添加到这样的屏幕上：

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