Блог

Главная - Вопросы по программированию - как скрыть метку в нижней вкладке навигатора react navigation v5

как скрыть метку в нижней вкладке навигатора react navigation v5

#react-native #react-navigation-v5 #react-navigation-bottom-tab

#react-native #react-navigation-v5 #react-navigation-bottom-tab

Вопрос:

я пытаюсь скрыть метку. и showLabel: false не работает.

 import React, {useLayoutEffect} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {useNavigation} from '@react-navigation/native';

import HomeTopTabNavigator from '../routes/home.top.tab';
import {NAVIGATOR} from '../constants/screen.constants';
import THEME from '../constants/theme.constants';
import Icon from '../components/atoms/Icon';

const HomeStack = createStackNavigator();

function HomeStackNavigator() {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      showLabel: false,
      tabBarIcon: () => (
        <Icon
          type="MaterialCommunityIcons"
          name="home"
          size={24}
          color={THEME.PRIMARY}
        />
      ),
    });
  }, [navigation]);

  return (
    <HomeStack.Navigator
      screenOptions={{headerStyle: {elevation: 0, shadowOpacity: 0}}}>
      <HomeStack.Screen
        name={NAVIGATOR.HomeTopTab}
        component={HomeTopTabNavigator}
      />
    </HomeStack.Navigator>
  );
}

export default HomeStackNavigator;

Комментарии:

1. используете ли вы панель вкладок?

2. ДА. родительским элементом этого HomeStackNavigator() является TabNavigator

Ответ №1:

Для панели вкладок выполните следующие действия ,

 tabBarOptions={{
        showLabel: false,

}
}

Комментарии:

1. <Параметры экрана Tab.Navigator={{ tabBarShowLabel: false }} …

2. Не работает для версии 6 @react-navigation / bottom-tabs для нижних вкладок

Ответ №2:

Если вы используете https://reactnavigation.org/docs/bottom-tab-navigator

пожалуйста, ознакомьтесь с этим вместо

https://reactnavigation.org/docs/material-bottom-tab-navigator/

Что-то вроде

 import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import FeedScreen from './Feed';
import AddScreen from './Add';
import ProfileScreen from './Profile';

const Tab = createMaterialBottomTabNavigator();

const MainScreen = () => {
  return (
    <Tab.Navigator labeled={false}>
      <Tab.Screen
        name='FeedTab'
        component={FeedScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name='home' color={color} size={26} />
          ),
        }}
        
      />
      <Tab.Screen
        name='AddTab'
        component={AddScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name='plus-box' color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name='ProfileTab'
        component={ProfileScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons
              name='account-circle'
              color={color}
              size={26}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default MainScreen;