reactjs - 如何仅在事件选项卡上显示 TabBar 标签？

Question

我想在选项卡未激活时隐藏选项卡栏标签。使用 tabBarOptions 中的 showLabel 我只能完全禁用它们。提前致谢。

Answer 1

嘿，德鲁，谢谢你的想法，我自己无法弄清楚，但我认为对于问题中提出的功能来说，你有很多不必要的额外代码。这是我对此的看法，这也同样有效。

export const BottomTabNavigator = createBottomTabNavigator(
  {
    News: {
      screen: NewsNavigator,
      navigationOptions: {
        tabBarIcon: ({ focused }: any) =>
          focused ? <NewsIconActive /> : <NewsIcon />
      }
    },
    Rewards: {
      screen: RewardsNavigator,
      navigationOptions: {
        tabBarIcon: ({ focused }: any) =>
          focused ? <RewardsIconActive /> : <RewardsIcon />
      }
    },
    Home: {
      screen: HomeNavigator,
      navigationOptions: {
        tabBarIcon: ({ focused }: any) =>
          focused ? <HomeIconActive /> : <HomeIcon />
      }
    },
    Leaderboard: {
      screen: LeaderboardNavigator,
      navigationOptions: {
        tabBarIcon: ({ focused }: any) =>
          focused ? <LeaderboardIconActive /> : <LeaderboardIcon />
      }
    },
    Profile: {
      screen: ProfileNavigator,
      navigationOptions: {
        tabBarIcon: ({ focused }: any) =>
          focused ? <ProfileIconActive /> : <ProfileIcon />
      }
    }
  },
  {
    initialRouteName: 'Profile'
    },
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: ({ focused }) => {
        const { routeName } = navigation.state;
        switch (routeName) {
          case 'News':
            return focused ? (
              <Text>{routeName}</Text>
            ) : null;
            break;
          case 'Rewards':
            return focused ? (
              <Text>{routeName}</Text>
            ) : null;
            break;
          case 'Home':
            return focused ? (
              <Text>{routeName}</Text>
            ) : null;
            break;
          case 'Leaderboard':
            return focused ? (
              <Text >{routeName}</Text>
            ) : null;
            break;
          case 'Profile':
            return focused ? (
              <Text>{routeName}</Text>
            ) : null;
            break;
          default:
            return null;
            break;
        }
      }
    })
  }
);