React navigation 5.0 Series III: the use of Drawer navigation

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={HomeScreen} />
        <Drawer.Screen name='Setting' component={SettingsScreen} />
      </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.

Tags: Mobile React npm JSON

Posted on Mon, 04 May 2020 10:10:02 -0400 by aboyd