导航中的常见模式是从左侧(有时是右侧)使用抽屉在屏幕之间导航。
安装
yarn add @react-navigation/drawer
使用
如果您看了上一章节点击此处查看或者您之前使用过,那么您对React-Navigation有了一定的了解,下面请看一段关于DrawerNavigator的代码。
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />
</View>
);
}
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
- 打开和关闭抽屉
navigation.openDrawer();
navigation.closeDrawer();
// 如果关闭,则打开抽屉窗格,如果打开,则关闭抽屉窗格
navigation.toggleDrawer();
- 确定抽屉是打开还是关闭
import { useIsDrawerOpen } from '@react-navigation/drawer';
// ...
const isDrawerOpen = useIsDrawerOpen();
- 配置选项
Drawer.Navigator组件接受以下属性:- initialRouteName
导航器首次加载时要渲染的路线的名称。 - screenOptions
导航器中用于屏幕的默认选项。 - backBehavior
后退按钮处理的行为。- initialRoute 返回初始标签
- order 返回上一个标签页(按照标签页中显示的顺序)
- history 返回上次访问的标签页
- none 不处理后退按钮
- drawerPosition
选项是left或right。默认为left位置。 - drawerType
抽屉类型。它确定抽屉的外观和动画效果。- front:传统的抽屉,遮盖屏幕,并在屏幕后面覆盖。
- back:滑动后,抽屉就会显示在屏幕后面。
- slide:屏幕和抽屉均在滑动上滑动以露出抽屉。
- edgeWidth
允许定义滑动手势应激活的距离内容视图边缘的距离 - hideStatusBar
设置为true时,每当抽屉被拉出或处于“打开”状态时,抽屉组件都将隐藏OS状态栏。 - statusBarAnimation
隐藏状态栏时的动画。与…结合使用hideStatusBar。 - keyboardDismissMode
开始滑动手势时是否应关闭键盘。默认为’on-drag’。设置为’none’禁用键盘处理。 - minSwipeDistance
应激活打开抽屉的最小滑动距离阈值。 - overlayColor
打开抽屉时,颜色叠加层将显示在内容视图的顶部。抽屉打开时,不透明度从0到设置为动画1。 - gestureHandlerProps
传递给基础平移手势处理程序的道具。 - lazy
屏幕是否应该在首次访问时呈现。默认为true。false如果要在初始渲染时渲染所有屏幕,请将其设置为。 - sceneContainerStyle
包装屏幕内容的组件的样式对象。 - drawerStyle
抽屉组件的样式对象。您可以在此处传递抽屉的自定义背景色或自定义宽度。
<Drawer.Navigator drawerStyle={{ backgroundColor: '#c6cbef', width: 240, }} > {/* screens */} </Drawer.Navigator>
- drawerContent
返回React元素以呈现为抽屉内容的函数,例如导航项内容组件默认情况下会收到以下选项:- state-导航器的导航状态,state.routes包含所有路线的列表
- navigation -导航器的导航对象。
- descriptors-描述符对象,包含抽屉屏幕的选项。可以在访问这些选descriptors[route.key].options。
- progress -代表抽屉动画位置的动画节点(0处于关闭状态; 1处于打开状态)。
- activeTintColor
抽屉中活动项目中图标和标签的颜色。 - activeBackgroundColor
抽屉中活动项目的背景色。 - inactiveTintColor
抽屉中非活动项目中图标和标签的颜色。 - inactiveBackgroundColor
抽屉中非活动项目的背景颜色。 - itemStyle
单个项目的样式对象,其中可以包含图标和/或标签。 - labelStyle
样式对象,应用于Text呈现标签的内容部分的样式。 - contentContainerStyle
内容部分的样式对象ScrollView。 - style
包装视图的样式对象。
<Drawer.Navigator drawerContentOptions={{ activeTintColor: '#e91e63', itemStyle: { marginVertical: 30 }, }} > {/* screens */} </Drawer.Navigator>
- initialRouteName
- options 配置
- title
通用标题可以用作备用headerTitle和drawerLabel - drawerLabel
字符串或给定的函数{ focused: boolean, color: string }返回React.Node,以显示在抽屉侧边栏中。当不确定,现场title使用 - drawerIcon
给定的函数{ focused: boolean, color: string, size: number }返回一个React.Node,以显示在抽屉侧边栏中 - gestureEnabled
是否可以使用手势打开或关闭抽屉。默认为true。 - unmountOnBlur
离开该屏幕时是否应卸载该屏幕。卸载屏幕将重置屏幕中的任何本地状态以及屏幕中嵌套导航器的状态。默认为false。
- title
更多相关信息请点击此处查看。