When I use react-Navigation myself, I have some problems, such as how to use the drawer view it provides. How about the ICONS in front of each list in the drawer view? How to combine tabNavigator and drawerNavigator?

In this article, I’ll give you introduce how to use the react – in the navigation, stackNavigator, switchNavigaotr, Drawernavigator, and Tab Navigator, how they work together.

I’ll show you the final effect, and then we’ll do it step by step. Let’s dive in.

The effect is as shown in the GIF, including basic bottom navigation, normal page to page navigation, and drawer view; The switchNavigator, which is used to switch the root view, is not shown in this figure. This is very simple, and I’ll talk about it later. One at a time

If you want to see the project code directly, here’s the portal:

Project address: Portal

Stack view, StackNavigator

import {createStackNavigator} from 'react-navigation';
import HomeDetailView from '.. /.. /views/home/HomeDetailView'
import HomeView from '.. /.. /views/home/HomeView'
Copy the code

Import all the pages you want to put in the home stack view, and note that the path is correct

I’m going to implement this function and create HomeViewStack, and I’ve only put in the core code in this post, but I’ve done a little bit of abstraction in the project to make it easier to understand

createStackNavigator({
        HomeView: HomeView,
        HomeDetailView: HomeDetailView
    })
Copy the code

Create DiscoverViewStack MoreViewStack

Drawer View, Drawer Navigator

CreateDrawerNavigator ({more: {screen: MoreViewStack, navigationOptions: () => ({drawerLabel:'more',
                    drawerIcon: ({ tintColor }) => (
                        <Ionicons name={'ios-chatbubbles'} size={20} color={tintColor} />)}),}, about: {screen: AboutView, navigationOptions: {drawerLabel:'about',
                    drawerIcon: ({ tintColor }) => (
                        <Ionicons name={'ios-navigate'} size={20} color={tintColor} />
                    )


                }
            },
        },
        {
            contentComponent: CustomDrawerComponent,
            drawerWidth: 300,
            contentOptions: {
                activeTintColor: '#6F18F0'}})Copy the code

Here, I will MoreViewStack directly into the drawer is the view, and then look down, I will stackNavigaotr and DrawerNavigator, tabNavigator are used in combination

Bottom navigation,Tab Navigator

Let’s see how do we do bottom navigation, TAB Navigator

import { createBottomTabNavigator } from 'react-navigation';
Copy the code

And then implement this function called createBottomTabNavigator

CreateBottomTabNavigator ({home: HomeViewStack, found: DiscoverViewStack, more: DrawerNavigator }, { defaultNavigationOptions: ({ navigation }) => ({ tabBarIcon: ({ focused, horizontal, tintColor }) => { const { routeName } = navigation.state;let IconComponent = Ionicons;
                    let iconName;
                    if (routeName === 'home') {
                        iconName = `ios-navigate`;
                       return <IconComponent name={iconName} size={25} color={tintColor} />;
                    } else if (routeName === 'found') {
                        iconName = `ios-chatbubbles`;
                        return <IconComponent name={iconName} size={25} color={tintColor} />;
                    } else {
                        iconName = `ios-more`;
                        return <IconComponent name={iconName} size={25} color={tintColor} />;
                    }

                },
            }),
            tabBarOptions: {
                activeTintColor: 'tomato',
                inactiveTintColor: 'gray',
            },
            initialRouteName: "Home page"},)Copy the code

Core code, that’s it. The general idea is as follows

The full project, which I have posted on GayHub, has the full code, but this post provides the general idea without going into the implementation details in great detail. If you haven’t seen the project code yet, please leave a comment on gayHub.

Project address: Portal

What is wrong with the place, please also correct, common progress