如何在底部选项卡导航器中隐藏标签反应导航 v5

时间:2021-01-28 14:23:38

标签: 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;

2 个答案:

答案 0 :(得分:0)

对于像 , 的 Tab 栏传递,

tabBarOptions={{
        showLabel: false,

}
}

答案 1 :(得分:0)

如果您使用 https://reactnavigation.org/docs/bottom-tab-navigator

请查看这个而不是

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

类似的东西

>>> line1 = (13.010815620422363, 6.765378475189209), (-9.916780471801758, 12.464008331298828)
>>> line2 = (-28.914321899414062, 2.4057865142822266),(13.973191261291504, -8.306382179260254)
>>> cosine_similarity_of_roads(line1, line2)
-0.9999993352122917