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

Drawer навигатор

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

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

npm install @react-navigation/drawer

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

Чтобы использовать этот навигатор Drawer, импортируйте его из @response-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.

Sumerian school

Links#

React Navigation

Contributors ✨#

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev

📖💲

Become a Patron!