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

客官°小女子只卖身不卖艺 2022-01-23 01:57 286阅读 0赞

# 一、前言 #

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

# 二、页面导航架构搭建 #

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

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

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70][]

# 三、代码实现 #

## 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',   //将标题居中
        }
    );

# 四、页面导航效果图 #

![20190601202611653.gif][]

源码地址：

[https://github.com/chenliwu/MyRNNavigationDemo][https_github.com_chenliwu_MyRNNavigationDemo]

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70]: /images/20220123/89258516b507479c9dfd20a47a07e08d.png
[20190601202611653.gif]: /images/20220123/27a453ff3b054175bc4ba3992d896997.png
[https_github.com_chenliwu_MyRNNavigationDemo]: https://github.com/chenliwu/MyRNNavigationDemo