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;
React Navigation源代码阅读 : navigators/TabNavigator.js
猜你喜欢
转载自blog.csdn.net/andy_zhang2007/article/details/80350587
今日推荐
周排行