反应原生 createbottomtabnavigator 隐藏标签栏标签答案

【问题标题】：react native createbottomtabnavigator hide tab bar label反应原生 createbottomtabnavigator 隐藏标签栏标签
【发布时间】：2019-03-01 15:02:46
【问题描述】：

我需要知道如何隐藏底部标签。

我尝试了以下方法：

tabBarShowLabels: '隐藏', tabbarlabelvisible: false.

我还删除了tabbarlabel: 'Home'，它仍然显示

如果有人可以为我指出正确的方向，我们将不胜感激。

import {createBottomTabNavigator} from 'react-navigation'
import Icon from 'react-native-vector-icons/Ionicons'


const Tabs = createBottomTabNavigator ({
  Home:{
    screen: Home,
    navigationOptions:{
      tabBarIcon: ({ focused, tintcolor }) => (
        <Icon name="ios-home" size={24}  />
      )
    }
  },
  Inbox:{screen: Inbox,
    navigationOptions:{
      tabBarIcon: ({ tintcolor }) => (
        <Icon name="ios-mail" size={24} />
      )
    }
  },
  Search:{screen: Search,
    navigationOptions:{
      tabBarIcon: ({ tintcolor }) => (
        <Icon name="ios-search" size={24} />
      )
    }
  },
  Favorites:{screen: Favorites,
    navigationOptions:{ 
    tabBarIcon: ({ tintcolor }) => (
      <Icon name="ios-heart" size={24} />
    )
  }
  },
  Settings:{screen: Settings,
    navigationOptions:{ 
      tabBarIcon: ({ tintcolor }) => (
        <Icon name="ios-settings" size={24} />
      )
    }
  }

}
});



export default class App extends Component {
  render() {

    return <Tabs />
  }
}

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

您必须像docs 所说的那样定义showLabel: false，就像

const Tabs = createBottomTabNavigator ({
  Home:{
    screen: Home,
    navigationOptions:{
      tabBarIcon: ({ focused, tintcolor }) => (
        <Icon name="ios-home" size={24}  />
      )
    }
  },
  ...
  ,
  Settings:{screen: Settings,
    navigationOptions:{
      tabBarIcon: ({ tintcolor }) => (
        <Icon name="ios-settings" size={24} />
      )
    }
  }

}
}, {
  tabBarOptions: { showLabel: false }
});

【讨论】：

谢谢它的工作，请您建议我们如何仅显示名称已选择的选项卡，除了选定的选项卡其他选项卡名称将被隐藏

【解决方案2】：

对于 react-navigation v4，将标签属性设置为 false 以仅显示图标。

    const Tabs = createBottomTabNavigator ({
  Home:{
    screen: Home,
    navigationOptions:{
      tabBarIcon: ({ focused, tintcolor }) => (
        <Icon name="ios-home" size={24}  />
      )
    }
  },
  ...
  ,
  Settings:{screen: Settings,
    navigationOptions:{
      tabBarIcon: ({ tintcolor }) => (
        <Icon name="ios-settings" size={24} />
      )
    }
  }

}
}, {labeled:false});

【讨论】：

【解决方案3】：

在新版本的 React Navigation 上，您只需将 showLabel 属性传递为 false

<Tab.Navigator tabBarOptions={{ showLabel: false }}>

【讨论】：

【解决方案4】：

上面的答案是完美的，但它有点弄乱了括号。所以对于像我这样的新蜜蜂来说，这是正确的代码。

const ProfileStack = createStackNavigator({
  Profile: SettingsScreen
});
ProfileStack.navigationOptions = {
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      title={'Profile'}
      name={focused ? 'tabIcon' : 'tabIconFocused'}
    />
  ),
  tabBarOptions: { showLabel: false }
};

【讨论】：