抽屜導覽

導覽的常見模式是在畫面上方（有時下方）使用左側（有時右側）的抽屜作為畫面間的導覽方式。

在繼續之前，請先依照 安裝說明，安裝並組態 @react-navigation/drawer 及其依賴項。

以抽屜為基礎的導覽的極簡範例

若要使用這個抽屜導覽器，請從 @react-navigation/drawer 導入：（向右滑動開啟）

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();

如果您想要切換抽屜，請 gọi như sau

navigation.toggleDrawer();

Mỗi hàm này đằng sau các trường hợp đơn giản chỉ là việc phân phối các hành động

navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());

Nếu bạn muốn xác định xem ngăn kéo đang mở hay đóng, bạn có thể làm như sau

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

// ...

const isDrawerOpen = useDrawerStatus() === 'open';