First of all, I wish you all a happy Youth Day and May Day holiday. In the previous series of articles we looked at the use of stack navigation and TAB navigation in version 5.0. Today we’ll look at drawer navigation. React Navigation5.0 series 1: TabNavigation with StackNavigator

The installation

yarn add @react-navigation/drawer
Copy the code

use

1. Import the component import {createDrawerNavigator} from'@react-navigation/drawer'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'} const drawer = createDrawerNavigator(); /> </View>)} 4. Integrate in AppContainer const App = () => {return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name='Home' component={HomeScreen} />
        <Drawer.Screen name='Setting' component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}
Copy the code

Implementation effect

navigation.openDrawer();
navigation.closeDrawer();
Copy the code

Alternatively, you can turn it on or off by distributing some action

navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());
Copy the code

This is how you can determine the status of the switch on the drawer when you need it

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

const isDrawerOpen = useIsDrawerOpen();
Copy the code

Drawer navigation has many attributes can be configured, detailed see: reactnavigation.org/docs/drawer…

Description of Drawer Navigator properties

  • InitialRouteName Sets the default first page route name for the first load
  • ScreenOptions Sets the options of the page
  • OpenByDefault Default drawer open state
  • DrawerPosition Sets the position in which the drawer is opened. The values are ‘left’ and’ right’. The default is left
  • DrawerType drawer opening way and animation
    • Font is the default effect animation commonly used
    • Back hide is also behind the page, which is displayed when sliding
    • The Slide page slides with drawers to display drawers
    • Permanent is always around the edge of the screen, which is useful on the big screen
  • DrawerStyle sets the drawerStyle
  • DrawerContent Sets the drawer’s content options, providing a DrawerItem object to set the navigation items and drawerContentOptions to configure the style of the related navigation options…… And so on property content, can be read through the address above

Problems with integration

Undefined is not a function (near ‘… createRouter… ‘)

yarn upgrade @react-navigation/native
Copy the code

TSX: “SyntaxError in @react-navigation/ XXX /xxx.tsx” or “SyntaxError: / XXX /@react-navigation/ XXX /xxx.tsx: Unexpected token”

If you use npm:

rm -rf node_modules
rm package-lock.json
npm install
Copy the code

If you use yarn:

Copy
rm -rf node_modules
rm yarn.lock
yarn
Copy the code

That’s all for today. If you have any questions, please leave them in the comments section and share with me.

Welcome to follow my official account: Jun Wei said. Share mobile development technology and work life.