更改活动和非活动图标颜色

Question

我有一个 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>
  );
};

如果我不将颜色属性传递给图标，它就不会显示。那我该怎么做呢？

Answer 1

有一个 focused 属性由 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>
      );
    };

Answer 2

它对我有用，将 svg 颜色更改为 #000 并将其添加到行代码中：

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

更改活动和非活动图标颜色

Change active and inactive icon color

react-native

react-navigation