How it works...

When you open the application, the initial route is shown. There are several options you can provide, such as initialRouteName to specify which should be the first shown view, order to rearrange the drawer items, and even a custom contentComponent if you want to draw the contents of the drawer by yourself; all in all, there is lots of flexibility. Your first screen should look like the following:

Our drawer navigator showing the initial screen

The usual way to open a drawer is by sliding from the left (although you can also set the drawer to slide in from the right). We also provided the hamburger icon to toggle the drawer open and shut. Opening the drawer should look like the following screenshot:

The opened drawer shows the menu, with the current screen highlighted, and the rest of the screen darkened

Clicking on any menu item will hide the current view, and show the selected view instead. For instance, we could select the Some jumps screen, as shown here:

After selecting an option, the drawer menu slides close on its own, and the selected screen is shown

In this particular screen, we show three buttons, all of which use the props.navigation.navigate() method to show a different screen. This shows that your navigation is not restricted to using the drawer, but that you can also directly browse in any way you want.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.188.11