底部标签如何不显示名称

Question

我有 app.js 其中：

const Tab = createBottomTabNavigator();


export default function App() {

    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen name='Home' component={Home} />
            </Tab.Navigator >
        </NavigationContainer>
    )

}

我显示底部的选项卡，但我看到顶部的导航栏显示“主页”，与 StackNavigator 一样。我希望没有真正的领域

Answer 1

有必要为 tabs.screen 添加 options = {{headerShown: false}}

Answer 2

隐藏底部标签标签


const Tab = createBottomTabNavigator();


export default function App() {

    return (
        <NavigationContainer>
            <Tab.Navigator
               tabBarOptions={{
                   showLabel: false, // add this line to hide tab label
     
                }}
               >
                <Tab.Screen name='Home' component={Home} />
            </Tab.Navigator >
        </NavigationContainer>
    )

}

Answer 3

您应该像下面这样显示 null 标签。在主选项卡导航器中为标签添加 false，因此所有页面都保持不变，就像没有出现标签一样。

在 Tab.Navigator

中添加 tabBarOptions={{showLabel: false}}

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

这里是官方参考link：https://reactnavigation.org/docs/tab-based-navigation/

底部标签如何不显示名称

bottom tabs how not to show name

javascript

react-native

expo

隐藏底部标签标签