Блог

У меня есть MaterialBottomNavigator, и я хочу изменить цвет значка на основе активной вкладки. Я использовал activeColor и inactiveColor , но он не меняет цвет.

 const Navigation = () => {
  return (
    <Tab.Navigator
      initialRouteName="About"
      activeColor="black"
      inactiveColor="#808080"
      barStyle={{backgroundColor: 'white'}}>
      <Tab.Screen
        name="About"
        component={About}
        options={{
          tabBarIcon: () => <Icon name="people" size={30} />,
        }}
      />
      <Tab.Screen name="Sketches" component={Sketches} />
    </Tab.Navigator>
  );
};

 

И если я не передаю цветовую опору значку, он не отображается. Итак, как я могу это сделать?

Существует сфокусированное свойство, возвращаемое tabBarIcon, которое будет указывать, активна вкладка или нет. Таким образом, вы можете использовать его следующим образом

Пример

 tabBarIcon: ({ focused }) => (
    <Icon color={focused ? "black" : "#808080"} name="people" size={30} />
  ),
 

Полный код:

    const Navigation = () => {
      return (
        <Tab.Navigator
          initialRouteName="About"
          activeColor="black"
          inactiveColor="#808080"
          barStyle={{backgroundColor: 'white'}}>
          <Tab.Screen
            name="About"
            component={About}
            options={{
            tabBarIcon: ({ focused }) => (
         <Icon color={focused ? "black" : "#808080"} name="people" size={30} />
      ),
            }}
          />
          <Tab.Screen name="Sketches" component={Sketches} />
        </Tab.Navigator>
      );
    };
 

Это работает для меня, измените цвет svg на # 000 и добавьте это в код строки:

 tabBarIcon: ({ focused }) => (
    <Icon fill={focused ? "black" : "#808080"} name="people" size={30} />
  ),