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。

---

更多相關信息請點擊此處查看。