React-navigation simple to use

React-native development, there are multiple pages in an application, the jump between pages is how to achieve it? The app does not use hyperlinks to achieve jumps between multiple pages. On the IOS side react Native provides a NavigatorIOS component that implements this requirement, but there are no related components on the Android side. Fortunately, there is also a library here to help us achieve a unified navigation function. This library is react-navigation.

Let's explore how react-navigation is used.
This way we can use this navigation library in our project.

React-navigation mainly has four kinds of navigation components: Stack Navigation, Tab Navigation, Drawer Navigation, and custom navigation. Each is a packaged react native component. We can use these components directly as the root node component of the application. In general, the first three kinds of navigation can meet most of our scenario requirements.

StackNavigator

StackNavigator includes 2 parameters, one is routing configuration, one navigation style configuration (this configuration can not be transmitted, there is a default style). The following is a simple example that jumps between the HomePage and DetailPage 2 pages.

import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Page</Text>
      </View>
    );
  }
}

class DetailPage extends Component {
    render() {
        return (
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Detail Page</Text>
          </View>
        );
    }
}

const routerConfig = {
    Home: HomePage,
    Detail: DetailPage
};

const stackConfig = {
     navigationOptions: {
        headerStyle: {
            backgroundColor: 'blue',
            ...
        },
        ...
     }
     ...
};

export default StackNavigator(routerConfig, stackConfig);

AbNavigator configuration parameters https://reactnavigation.org/docs/tab-navigator.html.

TabNavigator

The TabNavigator contains three parameters, TabNatigator (NavigatorView, router, navigationConfig). It is more suitable for single window display, and the jump is relatively straightforward. It does not obviously feel that it is the switching of multiple pages.

import React from 'react';
import { View, Text } from 'react-native';
import { TabNavigator } from 'react-navigation';
import HomePage from 'homePage';
import DetailPage from 'detailPage';

const routerConfig = {
    Home: HomePage,
    Detail: DetailPage
};

const stackConfig = {
     tabBarPosition: 'bottom',
     ...
};

export default TabNavigator(routerConfig, stackConfig);

TabNavigator configuration parameters https://reactnavigation.org/docs/tab-navigator.html.

DrawerNavigator

This navigation is generally used to do sidebar pop and shrink navigation. DrawerNavigator(routerConfigs, navigationConfig) is similar to the above two navigations except that the style and location are different.

import React from 'react';
import { View, Text } from 'react-native';
import { **DrawerNavigator** } from 'react-navigation';
import HomePage from 'homePage';
import DetailPage from 'detailPage';

const routerConfig = {
    Home: HomePage,
    Detail: DetailPage
};

const stackConfig = {
     activeTintColor: '#e91e63',
     ...
};

export default **DrawerNavigator**(routerConfig, stackConfig);

DrawerNavigator configuration parameter https://reactnavigation.org/docs/drawer-navigator.html

React-navigation is very easy to use. StackNavigator is suitable for use in business applications for multiple categories and modules, allowing users to focus on a particular piece of content. TabNavigator is suitable for applications with a small number of business modules, allowing users to see the contents of the application at a glance.

Show Comments