专注于React Navigation TabNavigator

Question

Key：React Native - React Navigation - TabNavigator

我不明白TabNavigator如何专注于＆＃34;专注于＆＃34;。

export default TabNavigator({
  Leaderboard: {
    screen: LeaderboardScreen
  },
  Game: {
    screen: GameScreen
  },
  Settings: {
    screen: SettingsScreen
  }
}, {
  initialRouteName: 'Game',
  navigationOptions: ({navigation}) => ({
    tabBarIcon: ({focused}) => {
      const {routeName} = navigation.state;
      let iconName;
      let labelName;
      switch (routeName) {
        case "Game":
          labelName = 'Game';
          iconName = "md-information-circle";
          break;
        case "Leaderboard":
          labelName = 'Leaderboard';
          iconName = "md-link";
          break;
        case "Settings":
          labelName = 'Settings';
          iconName = "md-options";
      }
      console.log(labelName, focused)
      return (
        <IconTextAnimation text={labelName} focused={focused}><Ionicons
          name={iconName}
          size={32}
          style={{
          marginBottom: -3
        }}
          color={focused
          ? Colors.tabIconSelected
          : Colors.tabIconDefault}/>
        </IconTextAnimation>
      );
    }
  }),
}

每次我在新屏幕上时，console.log都会显示以下内容：

Leaderboard true
Leaderboard false
Game true
Game false
Settings true
Settings false

但是＆＃34;专注于＃34;例如，适用于颜色。所以我真的不明白这是如何运作的。因为console.log表示所有内容都处于相同的状态：false。