React Native Navigation：只显示焦点项目的选项卡标签

Question

我只是尝试有条件地 show/hide 标签导航器项目的标签，基于它们是否被聚焦。我可以像这样更改图标的色调：

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

     return icon

但是尝试基于相同的 prop 有条件地更改 showLabel 布尔值不起作用？

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

选项卡栏上的所有项目都会显示标签。

Any/all帮助感谢！

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

React Native Navigation：只显示焦点项目的选项卡标签

React Native Navigation: Only show tab label for focused item

react-native

react-native-navigation

react-navigation