react-navigation 之 TabNavigator

react-navigation 之 TabNavigator

上文已经说过StackNavigator,这篇文章说说TabNavigator,TabNavigator 与 StackNavigator 用法类似 语法相似

TabNavigator平台差异

Android IOS 默认显示效果不一样, Android tab默认在Top而IOS 默认在Buttom 不过我们可以设置参数改变这些默认效果

    const Presets = {
    iOSBottomTabs: {
        tabBarComponent: TabBarBottom,
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        animationEnabled: false,
        lazy: false,
    },
    AndroidTopTabs: {
        tabBarComponent: TabBarTop,
        tabBarPosition: 'top',
        swipeEnabled: true,
        animationEnabled: true,
        lazy: false,
    },
};

参数说明


export default (
    routeConfigMap: NavigationRouteConfigMap,
    stackConfig: StackNavigatorConfig = {}
    )
    TabNavigator = (
    routeConfigs: NavigationRouteConfigMap,  //和StackNacigator 一样
    config: TabNavigatorConfig = {}
    )
   export type NavigationRouteConfigMap = {
  [routeName: string]: NavigationRouteConfig<*>,
};

routeConfigs (第一个参数)

都是基于 NavigationRouteConfigMap 但不同点在于 navigationOptions 里面的参数不一致

上文已经说过了StackNavigator 这里就不累述了

navigationOptionstabBar*系列都是设置TabNavigator的

  • title
  • tabBarLabel
  • tabBarIcon
  • tabBarVisible
export type NavigationScreenOptions = {
    title?: string,
    };
export type NavigationTabScreenOptions = NavigationScreenOptions & {
    tabBarIcon?:
        | React.Element<*>
        | ((options: { tintColor: ?string, focused: boolean }) => ?React.Element<
        *
        >),
    tabBarLabel?:
        | string
        | React.Element<*>
        | ((options: { tintColor: ?string, focused: boolean }) => ?React.Element<
        *
        >),
    tabBarVisible?: boolean,
    };

export type TabViewConfig = {
    tabBarComponent?: ReactClass<*>,
    tabBarPosition?: 'top' | 'bottom',
    tabBarOptions?: {},
    swipeEnabled?: boolean,
    animationEnabled?: boolean,
    lazy?: boolean,
};

通过上面源码可以知道:

  • title 是一个string类型的 会同时设置StackNavigator的title(当全局没有设置title属性时)
  • tabBarLabel 是既可以是string又可以是function(tintColor: ?string, focused: boolean)
  • tabBarIcon 是既可以是string又可以是function(tintColor: ?string, focused: boolean)
  • tabBarVisible boolean 类型 是否显示tabbar 默认显示

TabNavigatorConfig (第二个参数)

直接上源码

export type TabNavigatorConfig = {
    containerOptions?: void,
    } & NavigationTabRouterConfig &
    TabViewConfig;
    export type NavigationTabRouterConfig = {
        initialRouteName?: string,
        paths?: NavigationPathsConfig,
        navigationOptions?: NavigationScreenConfig,
        //以下是TabBar特有的
        order?: Array, // todo: type these as the real route names rather than 'string'
        // Does the back button cause the router to switch to the initial tab
        backBehavior?: 'none' | 'initialRoute', // defaults `initialRoute`

export type TabViewConfig = {
        tabBarComponent?: ReactClass<*>,
        tabBarPosition?: 'top' | 'bottom',
        tabBarOptions?: {},
        swipeEnabled?: boolean,
        animationEnabled?: boolean,
        lazy?: boolean,
    };
};

{

  • initialRouteName 设置默认的页面组件
  • paths
  • navigationOptions
  • order
  • backBehavior 按 back 键是否跳转到第一个Tab(首页), none 为不跳转
  • tabBarPosition 设置tabbar的位置,iOS默认在底部,安卓默认在顶部。(属性值:'top','bottom')
  • swipeEnabled 是否允许在标签之间进行滑动。
  • animationEnabled 是否在更改标签时显示动画。
  • lazy
  • tabBarOptions 配置标签栏的一些属性

}

由以上源码可知
StackNavigator 区别多了 order , backBehavior,tabBarPosition,swipeEnabled,animationEnabled,lazy,backBehavior 还有 navigationOptions,tabBarOptions 的区别

tabBarOptions 配置标签栏的一些属性

ios  TabBarBottom.js
type DefaultProps = {
        activeTintColor: string,  // label和icon的前景色 活跃状态下(选中)。
        activeBackgroundColor: string,  //:label和icon的背景色 活跃状态下(选中) 。
        inactiveTintColor: string,    //label和icon的前景色 不活跃状态下(未选中)。
        inactiveBackgroundColor: string,  //label和icon的背景色 不活跃状态下(未选中)。
        showLabel: boolean,  // 是否显示label,默认开启。
    };

type Props = {
        activeTintColor: string,  // label和icon的前景色 活跃状态下(选中)。
        activeBackgroundColor: string,  //:label和icon的背景色 活跃状态下(选中) 。
        inactiveTintColor: string,      //label和icon的前景色 不活跃状态下(未选中)。
        inactiveBackgroundColor: string,  //label和icon的背景色 不活跃状态下(未选中)。
        position: Animated.Value,
        navigation: NavigationScreenProp,
        jumpToIndex: (index: number) => void,
        getLabel: (scene: TabScene) => ?(React.Element<*> | string),
        renderIcon: (scene: TabScene) => React.Element<*>,
        showLabel: boolean,   // 是否显示label,默认开启。
        style?: Style,       //tabbar的样式。
        labelStyle?: Style,   //label的样式。
        showIcon: boolean,      //是否显示图标,默认关闭。
    };

android  TabBarTop.js
type DefaultProps = {
        activeTintColor: string,  //label和icon的前景色 活跃状态下(选中) 。
        inactiveTintColor: string,  //label和icon的前景色 不活跃状态下(未选中)。
        showIcon: boolean,          //是否显示图标,默认关闭。
        showLabel: boolean,         // 是否显示label,默认开启。
        upperCaseLabel: boolean,   //是否使标签大写,默认为true。
    };
     indicatorStyle:标签指示器的样式对象(选项卡底部的行)。安卓底部会多出一条线,可以将height设置为0来暂时解决这个问题。
type Props = {
        activeTintColor: string,//label和icon的前景色 活跃状态下(选中) 。
        inactiveTintColor: string, //label和icon的前景色 不活跃状态下(未选中)。
        showIcon: boolean,          //是否显示图标,默认关闭。
        showLabel: boolean,          // 是否显示label,默认开启。
        upperCaseLabel: boolean, //是否使标签大写,默认为true。
        position: Animated.Value,
        navigation: NavigationScreenProp,
        getLabel: (scene: TabScene) => ?(React.Element<*> | string),
        renderIcon: (scene: TabScene) => React.Element<*>,
        labelStyle?: Style,     //label的样式。
        iconStyle?: Style,      //图标的样式。
    };
android  默认的 iconStyle 和 labelStyle
   icon: {
    height: 24,
    width: 24,
  },
  label: {
    textAlign: 'center',
    fontSize: 13,
    margin: 8,
    backgroundColor: 'transparent',
  },
  ios  默认的 iconStyle 和 labelStyle
   icon: {
    flexGrow: 1,
  },
  label: {
    textAlign: 'center',
    fontSize: 10,
    marginBottom: 1.5,
    backgroundColor: 'transparent',
  },

上述可知 Android 特有的属性 : indicatorStyle,iconStyle,upperCaseLabel

你可能感兴趣的:(react-navigation 之 TabNavigator)