react-native - React Native Navigation：仅显示焦点项目的选项卡标签

Question

我只是试图根据标签导航器的项目是否聚焦有条件地显示/隐藏标签。我可以像这样更改图标的色调：

tabBarIcon: ({ focused }) => {
   const icon = <Image
     style={{
        width: 25,
        height: 25,
        tintColor: focused ? colors.primary : colors.inactive
     }}
     source={require('./assets/account.png');}
     /> ;

     return icon

但是尝试根据相同的道具有条件地更改 showLabel 布尔值是行不通的？

tabBarOptions={{
       activeTintColor: colors.primary,
       inactiveTintColor: colors.inactive,
       showLabel: ({ focused }) => {
         return focused ? true : false
       },

标签栏上显示所有项目的标签。

任何/所有帮助表示赞赏！

标签： react-nativereact-navigationreact-native-navigation

Answer 1

弄清楚了。

    <Tab.Navigator 
      screenOptions={({ route }) => ({
        tabBarLabel: ({ focused }) => {
          return <Text style={{fontSize: 14, fontWeight: '600', color: colors.primary}}>{focused ? route.name : ""}</Text>
        },
        tabBarIcon: ({ focused }) => {
          let iconSource;

          if (route.name === 'Map') {
            iconSource = require('./assets/public.png');
          } else if (route.name === 'List') {
            iconSource = require('./assets/numbered.png');
          } else if (route.name === 'Log') {
            iconSource = require('./assets/menu.png');
          } else if (route.name === 'Talk') {
            iconSource = require('./assets/chat.png');
          } else if (route.name === 'Account') {
            iconSource = require('./assets/account.png');
          } 

          const icon = <Image
            style={{
              width: 25,
              height: 25,
              tintColor: focused ? colors.primary : colors.inactive,
              marginTop: focused ? 5 : 15
            }}
            source={iconSource}
          /> ;

          return icon
        },
      })}
    >