前言

react navigation有四个主要的导航器：
StackNavigator：进行页面间的跳转
TabNavigator：底部或顶部的标签导航
SwitchNavigator：官方描述：

SwitchNavigator的目的是一次只显示一个屏幕。默认情况下，它不处理后退操作，并在您切换时将路由重置为其默认状态。

我将它理解为连接两个导航（一个是你只想显示一次的，另一个是APP核心页面）的东西，主要用于身份认证或APP启动图

DrawerNavigator：从左（右）拖出的抽屉导航

四个一起使用的效果图如下：

WeChat_20181229191407~4.gif

开始

开始之前先抛出结论：四个结合使用的嵌套顺序是：

SwitchNavigator  ——>  DrawerNavigator  ——>  StackNavigator  ——>  TabNavigator

SwitchNavigator是最底部的，也就是说最后createAppContainer里面写的是SwitchNavigator。相应的TabNavigator就是最上层，下面我们通过代码更直观的说明

APP.js：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation'
import SwitchNavigator from './App/Navigator/SwitchNavigator'

export default AppConatiner = createAppContainer(SwitchNavigator)

SwitchNavigator.js：

import { createSwitchNavigator } from 'react-navigation';
import SplashNavigator from './SplashNavigator';
import DrawerNavigator from './DrawerNavigator'

export default createSwitchNavigator(
    {
        //这个是上图中的启动动画，也可以是你的登录注册页面等
        //你想只显示一次的页面组件
        SplashNavigator : SplashNavigator,    
        DrawerNavigator : DrawerNavigator
    },
)

SplashNavigator.js（只包含一个启动动画）：

import { createStackNavigator } from 'react-navigation';
import Splash from '../Screen/Splash'

export default StackNavigator = createStackNavigator(
    {
        SplashScreen : Splash,
    },
    {
        defaultNavigationOptions:{
            header:null
        }
    }
)

DrawerNavigator.js：

import React, { Component } from 'react';
import { createDrawerNavigator } from 'react-navigation';
import Me from '../Screen/Me';
import StackNavigator from './StackNavigator'
import { deviceWidth } from '../constant/constant'

export default createDrawerNavigator(
    { 
        StackNavigator : StackNavigator 
    },
    {
        contentComponent : Me,      //用于覆盖抽屉中的组件
        drawerWidth : deviceWidth*0.85,    

    }
)

StackNavigator.js：

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import TabNavigator from './TabNavigator'
import TitleBar from '../Component/titleBar';
import NewsDetail from '../Screen/NewsDetail'

export default createStackNavigator(
    {
        
        TabNavigator : {
            screen : TabNavigator,
            navigationOptions:{
                header:()=>{
                    return <TitleBar />      //这是我自定义的头部组件，只作用于TabNavigator
                }
            }
        },       
        NewsDetail : {
            screen : NewsDetail,      //新闻详情页面
        },
    },
    {
        initialRouteName : 'TabNavigator',
        defaultNavigationOptions:{
            header:null
        }
    }
)

TabNavigator.js：

import { createBottomTabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'
import React, { Component } from 'react';
import Home from '../Screen/Home';
import Game from '../Screen/Game';
import Rank from '../Screen/Rank';

export default createBottomTabNavigator(
    {
        '首页' : Home,
        '比赛' : Game,
        '数据' : Rank,
    },
    {
        defaultNavigationOptions: ({navigation}) => ({
          tabBarIcon: ({ focused, horizontal, tintColor }) => {
            const { routeName } = navigation.state;
            let iconName;
            if (routeName === '首页') {
                iconName='ios-document'
            } else if (routeName === '数据') {
                iconName='ios-podium'
            }else{
                iconName='ios-football'
            }

            return <Icon name={iconName} size={25} color={tintColor} />;
          },
        }),
        tabBarOptions: {
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        },
        swipeEnabled:true
    }
)

结语

本文主要用于记录个人学习轨迹，若能为了各位提供一些灵感，是本人的荣幸