React-Navigation 5.X 学习记录（三）------ DrawerNavigator 篇

导航中的常见模式是从左侧（有时是右侧）使用抽屉在屏幕之间导航。

安装

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组件接受以下属性：
  1. initialRouteName
     导航器首次加载时要渲染的路线的名称。
  2. screenOptions
     导航器中用于屏幕的默认选项。
  3. backBehavior
     后退按钮处理的行为。
     • initialRoute 返回初始标签
     • order 返回上一个标签页（按照标签页中显示的顺序）
     • history 返回上次访问的标签页
     • none 不处理后退按钮
  4. drawerPosition
     选项是left或right。默认为left位置。
  5. drawerType
     抽屉类型。它确定抽屉的外观和动画效果。
     • front：传统的抽屉，遮盖屏幕，并在屏幕后面覆盖。
     • back：滑动后，抽屉就会显示在屏幕后面。
     • slide：屏幕和抽屉均在滑动上滑动以露出抽屉。
  6. edgeWidth
     允许定义滑动手势应激活的距离内容视图边缘的距离
  7. hideStatusBar
     设置为true时，每当抽屉被拉出或处于“打开”状态时，抽屉组件都将隐藏OS状态栏。
  8. statusBarAnimation
     隐藏状态栏时的动画。与…结合使用hideStatusBar。
  9. keyboardDismissMode
     开始滑动手势时是否应关闭键盘。默认为’on-drag’。设置为’none’禁用键盘处理。
  10. minSwipeDistance
      应激活打开抽屉的最小滑动距离阈值。
  11. overlayColor
      打开抽屉时，颜色叠加层将显示在内容视图的顶部。抽屉打开时，不透明度从0到设置为动画1。
  12. gestureHandlerProps
      传递给基础平移手势处理程序的道具。
  13. lazy
      屏幕是否应该在首次访问时呈现。默认为true。false如果要在初始渲染时渲染所有屏幕，请将其设置为。
  14. sceneContainerStyle
      包装屏幕内容的组件的样式对象。
  15. drawerStyle
      抽屉组件的样式对象。您可以在此处传递抽屉的自定义背景色或自定义宽度。

  	<Drawer.Navigator
  	  drawerStyle={{
  	    backgroundColor: '#c6cbef',
  	    width: 240,
  	  }}
  	>
  	  {/* screens */}
  	</Drawer.Navigator>
  

  16. drawerContent
      返回React元素以呈现为抽屉内容的函数，例如导航项内容组件默认情况下会收到以下选项：
      • state-导航器的导航状态，state.routes包含所有路线的列表
      • navigation -导航器的导航对象。
      • descriptors-描述符对象，包含抽屉屏幕的选项。可以在访问这些选descriptors[route.key].options。
      • progress -代表抽屉动画位置的动画节点（0处于关闭状态； 1处于打开状态）。
  17. activeTintColor
      抽屉中活动项目中图标和标签的颜色。
  18. activeBackgroundColor
      抽屉中活动项目的背景色。
  19. inactiveTintColor
      抽屉中非活动项目中图标和标签的颜色。
  20. inactiveBackgroundColor
      抽屉中非活动项目的背景颜色。
  21. itemStyle
      单个项目的样式对象，其中可以包含图标和/或标签。
  22. labelStyle
      样式对象，应用于Text呈现标签的内容部分的样式。
  23. contentContainerStyle
      内容部分的样式对象ScrollView。
  24. style
      包装视图的样式对象。

  	<Drawer.Navigator
  	  drawerContentOptions={{
  	    activeTintColor: '#e91e63',
  	    itemStyle: { marginVertical: 30 },
  	  }}
  	>
  	  {/* screens */}
  	</Drawer.Navigator>
  

• options 配置
  1. title
     通用标题可以用作备用headerTitle和drawerLabel
  2. drawerLabel
     字符串或给定的函数{ focused: boolean, color: string }返回React.Node，以显示在抽屉侧边栏中。当不确定，现场title使用
  3. drawerIcon
     给定的函数{ focused: boolean, color: string, size: number }返回一个React.Node，以显示在抽屉侧边栏中
  4. gestureEnabled
     是否可以使用手势打开或关闭抽屉。默认为true。
  5. unmountOnBlur
     离开该屏幕时是否应卸载该屏幕。卸载屏幕将重置屏幕中的任何本地状态以及屏幕中嵌套导航器的状态。默认为false。

---

更多相关信息请点击此处查看。