React Navigation源代码阅读 : navigators/TabNavigator.js

import React from 'react';
import {Platform} from 'react-native';

import createNavigator from './createNavigator';
import createNavigationContainer from '../createNavigationContainer';
import TabRouter from '../routers/TabRouter';
import TabView from '../views/TabView/TabView';
import TabBarTop from '../views/TabView/TabBarTop';
import TabBarBottom from '../views/TabView/TabBarBottom';

// A tab navigators props are the intersection between
// the base navigator props (navgiation, screenProps, etc)
// and the view's props

/**
 * 用于创建选项卡式的导航器
 * @param routeConfigs 路由配置
 * @param config 其他导航器设置
 * @return {NavigationContainer}
 * @constructor
 */
const TabNavigator = (routeConfigs, config = {}) => {
    // Use the look native to the platform by default
    // mergedConfig 是最终真正被应用的导航器参数，在预配置缺省值中合并入配置参数对象config得到
    const mergedConfig = {...TabNavigator.Presets.Default, ...config};
    const {
        tabBarComponent, // 最终被用到的选项卡组件
        tabBarPosition, // 选项卡位置:top ? bottom ?
        tabBarOptions, // 选项卡配置参数
        lazy,
        removeClippedSubviews,
        swipeEnabled, // 是否允许通过左右滑动切换选项卡
        animationEnabled, // 选项卡切换时是否使用动画
        configureTransition,
        initialLayout, // 可选参数，包含宽度高度的初始值
        ...tabsConfig
    } = mergedConfig;

    // 创建选项卡路由器
    const router = TabRouter(routeConfigs, tabsConfig);

    // 构建选项卡导航器
    const navigator = createNavigator(router, routeConfigs, config)(props => (
        <TabView
            {...props}
            lazy={lazy}
            removeClippedSubviews={removeClippedSubviews}
            tabBarComponent={tabBarComponent}
            tabBarPosition={tabBarPosition}
            tabBarOptions={tabBarOptions}
            swipeEnabled={swipeEnabled}
            animationEnabled={animationEnabled}
            configureTransition={configureTransition}
            initialLayout={initialLayout}
        />
    ));

    // 为选项卡导航器做增强，使其具有 navigation 属性，并在导航状态
    // 没有从上面传入时管理导航状态,从而使其可以作为顶层组件使用
    return createNavigationContainer(navigator);
};

// 针对不同平台的缺省值的预定义
const Presets = {
    iOSBottomTabs: {
        tabBarComponent: TabBarBottom,
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        animationEnabled: false,
        initialLayout: undefined,
    },
    AndroidTopTabs: {
        tabBarComponent: TabBarTop,
        tabBarPosition: 'top',
        swipeEnabled: true,
        animationEnabled: true,
        initialLayout: undefined,
    },
};

/**
 * Use these to get Android-style top tabs even on iOS or vice versa.
 *
 * Example:
 * ```
 * const HomeScreenTabNavigator = TabNavigator({
 *  Chat: {
 *    screen: ChatScreen,
 *  },
 *  ...
 * }, {
 *  ...TabNavigator.Presets.AndroidTopTabs,
 *  tabBarOptions: {
 *    ...
 *  },
 * });
 *```
 */
TabNavigator.Presets = {
    iOSBottomTabs: Presets.iOSBottomTabs,
    AndroidTopTabs: Presets.AndroidTopTabs,
    Default:
        Platform.OS === 'ios' ? Presets.iOSBottomTabs : Presets.AndroidTopTabs,
};

export default TabNavigator;