📅  最后修改于: 2023-12-03 15:19:46.580000             🧑  作者: Mango
React Navigation 5 是 React Native 中常用的路由库。在某些场景下,我们需要隐藏页面中的标题。本文将介绍如何使用 React Navigation 5 隐藏标题。
在 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
中,我们可以通过在 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
中,我们可以通过在 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
,如果没有隐藏标题的需求,不需要设置这个属性。