使用react-navigation搭建APP页面导航架构

一、前言

接触react-navigation已有半年，从使用体验来说，它的效果是非常棒的，API的学习和使用也比较简单易用，所以react-native社区主推的导航库就是react-navigation。使用react-navigation可以快速搭建APP的页面导航架构，而且它的配置灵活，页面导航效果可以达到原生端的体验。

二、页面导航架构搭建

一般APP都会有这么几个页面，启动页、注册页、登录页、主页，我们可以将这四个页面作为SwichNavigator的路由，SwitchNavigator 的用途是一次只显示一个页面，实际上这些页面里面还要关联到其他页面，比如注册页面会关联到协议页，怎么处理这种情况呢？很容易，在SwichNavigator嵌套一个StackNavigator，注册页和协议页组成一个StackNavigator，然后这个StackNavigator又是SwichNavigator的一个路由，这样子实现页面的嵌套了。如此，整个APP的页面导航可以分为四个页栈，启动页StackNavigator、注册页StackNavigator、登录页StackNavigator、主页StackNavigator。

由此形成的APP页面导航架构如下：

 

三、代码实现

1、APP根导航器SwitchNavigator

import {
    createSwitchNavigator
} from 'react-navigation';

import LaunchNavigator from './LaunchNavigator';
import LoginNavigator from './LoginNavigator';
import RegisterNavigator from './RegisterNavigator';
import MainNavigator from './MainNavigator';


/**
 * created by chenlw on 2019/06/01
 * work:结合导航的身份验证流程。
 *
 *  身份验证流程使用SwitchNavigator作为APP的顶级导航器（AppRootNavigator），目前有4个切换分支，其中分支还可能包含其他页面的导航
 * （1）Launch：启动页面
 * （2）Login：登录页面（StackNavigator）
 * （3）Main：主页（StackNavigator）
 * （4）AppSetting：APP配置页面（StackNavigator）
 */
const AppRootNavigator = createSwitchNavigator(
    {
        Launch: {
            //启动页面
            screen: LaunchNavigator,
        },
        Login: {
            //登录页面
            screen: LoginNavigator,
        },
        Main: {
            //主页
            screen: MainNavigator,
        },
        Register: {
            //APP配置页面
            screen: RegisterNavigator,
        },
    },
    {
        initialRouteName: "Launch"
    }
);
export default AppRootNavigator;

 

2、启动页StackNavigator

import {
    createStackNavigator
} from 'react-navigation';

import Launch from './../pages/Launch';


import GlobalNavigationOptions from './GlobalNavigationOptions';

/**
 * created by chenlw on 2019/06/01
 */
export default createStackNavigator(
    {
        Launch: {
            screen: Launch,
        }
    },
    {
        initialRouteName: 'Launch',
        navigationOptions: GlobalNavigationOptions,
        headerLayoutPreset: 'center',   //将标题居中
        //headerMode: 'float',            //指定页眉的呈现方式
    }
);

 

3、注册页StackNavigator

import {
    createStackNavigator
} from 'react-navigation';

import Protocol from './../pages/Protocol';
import Register from './../pages/Register';
import GlobalNavigationOptions from "./GlobalNavigationOptions";

/**
 * created by chenlw on 2019/06/01
 */
export default createStackNavigator(
    {
        Register: {
            screen: Register,
        },
        Protocol: {
            screen: Protocol,
        },
    },
    {
        initialRouteName: 'Register',
        navigationOptions: GlobalNavigationOptions,
        headerLayoutPreset: 'center',   //将标题居中
    }
);

4、登录页StackNavigator

import {
    createStackNavigator
} from 'react-navigation';

import Login from './../pages/Login';


import GlobalNavigationOptions from './GlobalNavigationOptions';

/**
 * created by chenlw on 2019/06/01
 */
export default createStackNavigator(
    {
        Login: {
            screen: Login,
        }
    },
    {
        initialRouteName: 'Login',
        navigationOptions: GlobalNavigationOptions,
        headerLayoutPreset: 'center',   //将标题居中
        //headerMode: 'float',            //指定页眉的呈现方式
    }
);

 

5、主页栈

import {
    createStackNavigator
} from 'react-navigation';

import Main from './../pages/Main';
import ServiceDetails from './../pages/ServiceDetails';
import Settings from './../pages/Settings';
import GlobalNavigationOptions from "./GlobalNavigationOptions";


/**
 * created by chenlw on 2019/06/01
 * work：封装主页导航组件
 */
export default createStackNavigator(
    {
        Main: {
            screen: Main,
        },
        ServiceDetails: {
            screen: ServiceDetails,
        },
        Settings: {
            screen: Settings,
        },

    },
    {
        initialRouteName: 'Main',
        navigationOptions: GlobalNavigationOptions,
        headerLayoutPreset: 'center',   //将标题居中
    }
);

 

四、页面导航效果图

 

源码地址：

https://github.com/chenliwu/MyRNNavigationDemo