React Native Navigation。只显示重点项目的标签

Question

我只是想根据Tab导航器的项目是否集中，有条件地显示标签。我可以像这样改变图标的色调。

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
       },

标签出现在Tab栏的所有项目上。

任何帮助感激不尽

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