Перейти к содержанию

Drawer навигация

Общим для навигации является использование drawer с левой (иногда с правой) стороны для перемещения между экранами.

Drawer navigation

Прежде чем продолжить, установите и настройте @react-navigation/drawer и его зависимости, следуя инструкции по установке.

Минимальный пример навигации на основе drawer

Чтобы использовать этот навигатор drawer, импортируйте его из @react-navigation/drawer (проведите пальцем вправо, чтобы открыть):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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>
    );
}

Открытие и закрытие drawer

Чтобы открыть и закрыть drawer, воспользуйтесь следующими вспомогательными функциями:

1
2
navigation.openDrawer();
navigation.closeDrawer();

Если вы хотите переключить drawer, то сделайте следующее:

1
navigation.toggleDrawer();

Каждая из этих функций за кулисами просто диспетчеризирует действия:

1
2
3
navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());

Если Вы хотите определить, открыт или закрыт drawer, Вы можете сделать следующее:

1
2
3
4
5
import { useDrawerStatus } from '@react-navigation/drawer';

// ...

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

Ссылки

Комментарии