React本地创建底部标签导航器隐藏标签栏标签

z9zf31ra 于 2023-02-19 发布在 React

关注(0)|答案(6)|浏览(304)

我需要知道如何隐藏底部标签。
我尝试了以下方法：
选项卡栏显示标签："隐藏"，选项卡栏标签可见：错。
我还删除了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 />
  }
}

react-native

来源：https://stackoverflow.com/questions/52507482/react-native-createbottomtabnavigator-hide-tab-bar-label

6条答案

按热度按时间

lokaqttq1#

您必须按照文档中的说明定义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 }
});

赞(0）回复(0）举报 2023-02-19

htrmnn0y2#

在ReactNavigation的新版本中，您只需要将showLabel prop作为false传递

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

赞(0）回复(0）举报 2023-02-19

u0sqgete3#

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

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

赞(0）回复(0）举报 2023-02-19

q35jwt9p4#

与v6兼容

<Tab.Navigator
      screenOptions={() => ({
      tabBarShowLabel: false,
      ....

赞(0）回复(0）举报 2023-02-19

kokeuurv5#

对于react-navigation v4，将labeled属性设置为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});

赞(0）回复(0）举报 2023-02-19

u3r8eeie6#

使用标签栏显示标签属性

tabBarShowLabel: false,

代码

<NavigationContainer>

 <BottomTab.Navigator
  screenOptions={{
    activeTintColor: '#000',
    inactiveTintColor: '#fff',
    tabBarActiveTintColor: 'black',
    tabBarInactiveTintColor: 'gray',
    
     //this one
    tabBarShowLabel: false,
  }
    <BottomTab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <Icon
              name={focused ? 'home' : 'home-outline'}
              size={24}
              color={focused && 'black'}
            />
          ),
        }}
      />
    ----
    ----
 </BottomTab.Navigator>

</NavigationContainer>

赞(0）回复(0）举报 2023-02-19

我来回答

React本地创建底部标签导航器隐藏标签栏标签

6条答案

相关问题

热门标签

最新问答