当标签在 React Native 中处于活动状态或未处于活动状态时更改标签栏图标

Question

I have a bottom tab navigation in react native that I want it to display different icon if a tab is active and another icon if it is not active. How do I achieve it? I have my code below

...
import { createBottomTabNavigator } from "react-navigation-tabs";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import HomeScreen from "../screens/HomeScreen";
...

export default createBottomTabNavigator({
 HomePage: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarLabel: "Home",
    tabBarIcon: ({ tintColor }) => (
      <MaterialCommunityIcons
        name='home'
        color={tintColor}
        size={28}
      />
    )
  }
},
....
{
 tabBarOptions: {
  showLabel: false,
  activeTintColor: 'red',
  inactiveTintColor: "grey"
}
}
})

Answer 1

After some research here's how I managed to do it. First pass a 'focused' prop to tabBarIcon like below. Then do checks to determine which icon to render

export default createBottomTabNavigator({
 HomePage: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarLabel: "Home",
    tabBarIcon: ({ tintColor, focused }) => (
      <MaterialCommunityIcons
        name={focused ? "home" : "home-outline"}
        color={tintColor}
        size={28}
      />
    )
  }
},
....
{
 tabBarOptions: {
  showLabel: false,
  activeTintColor: 'red',
  inactiveTintColor: "grey"
}
}
})

Based on the code above, different icons are rendered with tint color whether the tab is active on not