如何仅在活动选项卡上显示 TabBar 标签？

Question

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

Answer 1

我也遇到了这个问题，但找到了可能对您有所帮助的解决方案。在下面查看我如何配置 tabBarIcon 和 tabBarLabel：

const MainNavigator = createBottomTabNavigator({
    Home: HomeStack,
    MyProsthetic: MyProstheticStack,
    Appointments: AppointmentsStack,
    MyNotes: MyNotesStack,
    Contact: ContactStack,
 },
 {
 navigationOptions: ({ navigation }) => ({
  tabBarIcon: ({ focused, tintColor }) => {
    const { routeName } = navigation.state;
    let icon;
    switch(routeName) {
      case 'Home':
        tabBarLabel = true
        return icon = <Icon name='home' size={30} color={focused ? Colors.darkBlue : Colors.lightGrey} />
      case 'MyProsthetic':
        return icon = <Icon name='user' size={28} color={focused ? Colors.darkBlue : Colors.lightGrey} />
      case 'Appointments':
        return icon = <IonIcon name='md-calendar' size={32} color={focused ? Colors.darkBlue : Colors.lightGrey} style={{position: 'relative', top: 3}}/>
      case 'MyNotes':
        return icon = <Icon name='file' size={23} color={focused ? Colors.darkBlue : Colors.lightGrey} />
      case 'Contact':
        return icon = <Icon name='phone' size={30} color={focused ? Colors.darkBlue : Colors.lightGrey} />

    }
    return icon
  },
  tabBarLabel: ({ focused, tintColor }) => {
    const { routeName } = navigation.state;
    let label;
    switch(routeName) {
      case 'Home':
        return label = focused ? <Text style={styles.activeTabText}>Home</Text> : null
      case 'MyProsthetic':
        return label = focused ? <Text style={styles.activeTabText}>My Prosthetic</Text> : null
      case 'Appointments':
        return label = focused ? <Text style={styles.activeTabText}>Appointments</Text> : null
      case 'MyNotes':
        return label = focused ? <Text style={styles.activeTabText}>Notes</Text> : null
      case 'Contact':
        return label = focused ? <Text style={styles.activeTabText}>Contact</Text> : null
    }
    return label
  },
}),
lazy: false,
tabBarOptions: {
  style: {
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
    borderTopWidth: 1,
    borderTopColor: Colors.lightGrey
  },
}
}
)

Answer 2

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

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;
        }
      }
    })
  }
);

Answer 3

在版本 5.x 中，您可以只使用“shifting”[https://reactnavigation.org/docs/material-bottom-tab-navigator/#shifting][1]，默认情况下仅适用于选项卡数量 > 3

<Tab.Navigator
      shifting
    >

编辑：如前所述，这仅对 material 底部标签栏有效

Answer 4

tabBarLabel 成功了！

<NavigationContainer>
      <Tab.Navigator
        initialRouteName="Home"
        screenOptions={({ route }) => ({
          tabBarIcon: ({ color }) => {
            if (route.name === 'Home') {
              return (<FontAwesomeIcon icon={faHome} size={25} color={color} />);
            } else if (route.name === 'Location') {
              return <FontAwesomeIcon icon={faMapMarker} size={25} color={color} />;
            } else if (route.name === 'Alerts') {
              return (<FontAwesomeIcon icon={faBell} size={25} color={color} />);
            } else if (route.name === 'Store') {
              return <FontAwesomeIcon icon={faStore} size={25} color={color} />;
            } else if (route.name === 'Profile') {
              return <FontAwesomeIcon icon={faUser} size={25} color={color} />;
            }
          },
          tabBarLabel: ({ focused, color }) => {
            let label;
            switch (route.name) {
              case 'Home':
                return label = focused ? <Text style={{ color }}>Home</Text> : null
              case 'Location':
                return label = focused ? <Text style={{ color }}>Location</Text> : null
              case 'Alerts':
                return label = focused ? <Text style={{ color }}>Alerts</Text> : null
              case 'Store':
                return label = focused ? <Text style={{ color }}>Store</Text> : null
              case 'Profile':
                return label = focused ? <Text style={{ color }}>Profile</Text> : null
            }
            return label
          }
        })}
        tabBarOptions={{ activeTintColor: 'blue', inactiveTintColor: 'gray' }}
      >
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Location" component={LocationStackScreen} />
        <Tab.Screen name="Alerts" component={AlertsStackScreen} />
        <Tab.Screen name="Store" component={StoreStackScreen} />
        <Tab.Screen name="Profile" component={ProfileStackScreen} />
      </Tab.Navigator>
</NavigationContainer >

Answer 5

这个相当简单的解决方案在 React Navigation 版本 5 中对我有用：

<Tab.Navigator
    screenOptions={({ route, navigation }) => {
        return { tabBarLabel: navigation.isFocused() ? route.name : '' };
    }}
>

Answer 6

我用 V6 做了这个：

screenOptions={({ route }) => ({
         tabBarLabel: ({ focused }) => {
                        let label;
                        return label = focused ? <Text style={{fontSize: 10, color: "gray"}}>{route.name}</Text> : null
                      }})

如何仅在活动选项卡上显示 TabBar 标签？

How to show TabBar label only on active Tab?

reactjs

react-native

react-navigation