React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈

React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈呢?

1 . 确定APP的整体风格,国外偏好使用Drawer布局, 但到了国内就很少被使用

2. 每个导航也是一个component, 可以作为另外一个导航的一个页面

其他的具体使用参考官网即可

import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import * as React from 'react';
import MineTabNavigator from '../screens/Mine/MineTabNavigator';
import DashboardTabNavigator from '../screens/Dashboard/DashboardTabNavigator';
import DeviceTabNavigator from '../screens/Device/DeviceTabNavigator';
import {MaterialTgitopTabNavigator} from '../screens/Organization/OrgTreeScreen';
import {createStackNavigator} from 'react-navigation-stack';
import NotificationTabNavigator from '../screens/Notification/NotificationTabNavigator';
import SplashScreen from '../screens/Splash/SplashScreen';
import LoginScreen from '../screens/Mine/Login/LoginScreen';
import Svg from '../components/Svg/svg';/**
 * 配置底部标签
 */
const Tab = createBottomTabNavigator({
    //每一个页面的配置
    DashboardScreen: {
        screen: DashboardTabNavigator,
        navigationOptions: {
            //stackNavigator的属性
            gestureResponseDistance: {horizontal: 300},
            headerBackTitle: null,
            headerStyle: {backgroundColor: '#FFFFFF'},//导航栏的样式
            //tab 的属性
            tabBarLabel: '首页',
            tabBarIcon: ({focused, horizontal, tintColor}) => (
                <Svg icon="abb_home_24" color={tintColor}/>
            ),
        },
    },
    NotificationTab: {
        screen: NotificationTabNavigator,
        navigationOptions: {
            //stackNavigator的属性
            headerTitle: '通知',
            gestureResponseDistance: {horizontal: 300},
            headerBackTitle: null,
            headerStyle: {backgroundColor: '#FFFFFF'},//导航栏的样式
            headerTitleStyle: {
                color: '#686868',
                fontSize: 16,
                fontFamily: 'ABBvoiceCNSG-Regular',
            },
            //tab 的属性
            tabBarLabel: '消息',
            tabBarIcon: ({focused, horizontal, tintColor}) => (
                <Svg icon="abb_alarm-bell_24" color={tintColor}/>
            ),
        },
    },
    MineTab: {
        screen: MineTabNavigator,
        navigationOptions: {
            //stackNavigator的属性
            headerTitle: '我的',
            gestureResponseDistance: {horizontal: 300},
            headerBackTitle: null,
            headerStyle: {
                backgroundColor: '#FFFFFF',
            },//导航栏的样式
            headerTitleStyle: {
                color: '#686868',
                fontSize: 16,
                fontFamily: 'ABBvoiceCNSG-Regular',
                height: 48,
            },
            //tab 的属性
            tabBarLabel: '我的',
            tabBarIcon: ({focused, horizontal, tintColor}) => (
                <Svg icon="abb_user_24" color={tintColor}/>
            ),
        },
    },

}, {
    //设置TabNavigator的位置
    tabBarPosition: 'bottom',
    //是否在更改标签时显示动画
    animationEnabled: true,
    //是否允许在标签之间进行滑动
    swipeEnabled: true,
    //按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
    backBehavior: 'false',
    //设置Tab标签的属性

    tabBarOptions: {
        //Android属性
        upperCaseLabel: false,//是否使标签大写，默认为true
        //共有属性
        showIcon: true,//是否显示图标，默认关闭
        showLabel: true,//是否显示label，默认开启
        activeTintColor: '#3366FF',//label和icon的前景色 活跃状态下（选中）
        inactiveTintColor: '#1F1F1F',//label和icon的前景色 活跃状态下（未选中）
        style: { //TabNavigator 的背景颜色
            backgroundColor: 'white',
            height: 55,
        },
        indicatorStyle: {//标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
            height: 0,
        },
        labelStyle: {//文字的样式
            fontSize: 13,
            marginTop: -5,
            marginBottom: 5,
        },
        iconStyle: {//图标的样式
            marginBottom: 5,
        },
    },
});

Tab.navigationOptions = ({navigation}) => ({
    header: null,
});

const RootStack = createStackNavigator(
    {
        Splash: SplashScreen,
        Tab: Tab,
        Login: LoginScreen,
        Logout: LogoutScreen,
        Notification: NotificationScreen,
        //-------------------
    },
    {
        initialRouteName: 'Splash',
        // mode: 'modal',
        // // 用于设置安卓卡片式跳转
        // // transitionConfig: () => ({
        // //   screenInterpolator: StackViewStyleInterpolator.forHorizontal,
        // // }),
        // navigationOptions: () => ({
        //     gesturesEnabled: true,
        // }),
        // // 默认导航头样式设置
        // defaultNavigationOptions: {
        //     header: null,
        // },
        headerLayoutPreset: 'center',
    },
);

export default AppContainer = createAppContainer(RootStack);