First of all, I wish you all a happy youth day and May Day holiday. In the previous series of articles, we learned about the use of stack navigation and tab navigation in the latest version of 5.0. Today, we'll take a look at the use of drawer navigation. React Navigation5.0 series I: the use of stack navigator React navigation 5.0 Series II: the use of TabNavigation @[toc]
install
yarn add @react-navigation/drawer
Use
1.Import corresponding components import { createDrawerNavigator } from '@react-navigation/drawer' 2.Create two pages const SettingsScreen = ({ navigation }) => { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>SettingScreen</Text> <Button title="Go to Details" onPress={() => navigation.navigate('Home')} /> </View> ) } const HomeScreen = ({ navigation }) => { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>HomeScreen</Text> <Button title="Go to Details" onPress={() => navigation.navigate('Setting')} /> </View> ) } 3.Establish drawer Navigator instance const Drawer = createDrawerNavigator(); 4.stay AppContainer Integration in const App = () => { return ( <NavigationContainer> <Drawer.Navigator initialRouteName="Home"> <Drawer.Screen name='Home' component= /> <Drawer.Screen name='Setting' component= /> </Drawer.Navigator> </NavigationContainer> ); }
Achieving results
This is the simple use of the Drawer navigation. Next, I will explain the opening and closing of components and the judgment method of judging the current state. How to turn drawers on and off:
navigation.openDrawer(); navigation.closeDrawer();
Or it can be opened or closed by sending some action s
navigation.dispatch(DrawerActions.openDrawer()); navigation.dispatch(DrawerActions.closeDrawer()); navigation.dispatch(DrawerActions.toggleDrawer());
You can judge the switch state of the current drawer when you need it by the following methods
import { useIsDrawerOpen } from '@react-navigation/drawer'; const isDrawerOpen = useIsDrawerOpen();
Drawer navigation also has many attributes that can be configured. For details: https://reactnavigation.org/docs/drawer-navigator
Introduction to the properties of the Drawer Navigator
- initialRouteName set the default first page route name to load for the first time
- Screen options set options for the page
- openByDefault default drawer open state
- drawerPosition sets the opening position of the drawer. The values are 'left' and 'right'. The default is left
- drawerType drawer opening method and animation
- font common default animation
- Back hidden also at the back of the page, displayed when sliding
- Show drawer when slide page and drawer slide together
- permanent always exists at the edge of the screen, which is more practical on the large screen
- drawerStyle sets the style of the drawer
- drawerContent sets the content options of the drawer. It provides the style that DrawerItem object is used to set navigation items and drawerContentOptions to configure related navigation options ...... And so on. You can read it carefully through the above address
Integration issues
1. Use the drawer navigation to report an error: undefined is not a function (near '...createRouter...') 
Solution: upgrade dependency
yarn upgrade @react-navigation/native
2. An error is reported after the above upgrade: "syntaxerror in @ react navigation / xxx / xxx. TSX" or "syntaxerror: / xxx / @ react navigation / xxx / xxx. TSX: unexpected token" 
Solution: delete the node modules and lock files and reinstall them
If you use npm:
rm -rf node_modules rm package-lock.json npm install
If you use yarn:
Copy rm -rf node_modules rm yarn.lock yarn
Let's introduce them today. If you have any questions, please leave a message in the comment area and communicate with me.
Welcome to my official account, Junwei said. Share mobile development technology and workplace life.