📌  相关文章
📜  reactnavigation 5 隐藏标题 - Javascript (1)

📅  最后修改于: 2023-12-03 15:19:46.580000             🧑  作者: Mango

React Navigation 5 隐藏标题

React Navigation 5 是 React Native 中常用的路由库。在某些场景下,我们需要隐藏页面中的标题。本文将介绍如何使用 React Navigation 5 隐藏标题。

在StackNavigator中隐藏标题

StackNavigator 中,我们可以通过在 options 属性中设置 headerShown: false 来隐藏标题。

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

在上面的示例中,我们将 headerShown 属性设置为 false,来隐藏 Home 页面的标题。

在TabNavigator中隐藏标题

TabNavigator 中,我们可以通过在 screenOptions 属性中设置 headerShown: false 来隐藏标题。

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

上面的示例中,我们将 headerShown 属性设置为 false,来隐藏 TabNavigator 中所有页面的标题。

在DrawerNavigator中隐藏标题

DrawerNavigator 中,我们可以通过在 drawerContentOptions 属性中设置 headerShown: false 来隐藏标题。

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function App() {
  return (
    <Drawer.Navigator drawerContentOptions={{ headerShown: false }}>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

上面的示例中,我们将 headerShown 属性设置为 false,来隐藏 DrawerNavigator 中所有页面的标题。

总结

使用 React Navigation 5 隐藏页面中的标题非常简单,只需要在对应的属性中设置 headerShown: false 即可。需要注意的是,headerShown 属性默认为 true,如果没有隐藏标题的需求,不需要设置这个属性。