Перейти к основному содержимому

Drawer навигатор

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

Прежде чем продолжить, сначала установите @react-navigation/drawer:

npm install @react-navigation/drawer

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

Чтобы использовать этот навигатор 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'

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button onPress={() => navigation.navigate('Notifications')} title="Go to notifications" />
  </View>
)

const NotificationsScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button onPress={() => navigation.goBack()} title="Go back home" />
  </View>
)

const Drawer = createDrawerNavigator()

const App = () => (
  <NavigationContainer>
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Notifications" component={NotificationsScreen} />
    </Drawer.Navigator>
  </NavigationContainer>
)

export default App

Попробуйте этот пример на Snack

Открытие и закрытие Drawer​

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

navigation.openDrawer()
navigation.closeDrawer()

Попробуйте этот пример на Snack

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

navigation.toggleDrawer()

Попробуйте этот пример на Snack

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

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

Попробуйте этот пример на Snack

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

import { useIsDrawerOpen } from '@react-navigation/drawer'

// ...

const isDrawerOpen = useIsDrawerOpen()

Done​

Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.

EnglishMoji!

React Navigation

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
💲

EnglishMoji!