React Navigation 指南 6：Tab navigation

文章基于 react-navigationv2.0.1
移动应用中最常见的导航风格是基于标签的导航。可以在屏幕底部或者顶部生成Tab导航。
和v1.x中不同的是，由TabNavigator变更为createBottomTabNavigator和createMaterialTopTabNavigator。

1. createBottomTabNavigator

底部tab导航，如图：

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);

示例

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

export default createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

RouteConfigs

路由配置对象

BottomTabNavigatorConfig

initialRouteName：初始路由名称。
order：定义选项卡顺序的routeNames数组。
paths：提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
backBehavior：点击后退按钮是否将标签切换到初始选项卡。如果是，则设置为initialRoute，否则none。默认为initialRoute行为。
tabBarComponent：可选，覆盖标签栏的组件。
tabBarOptions：具有以下属性的对象：
– activeTintColor：活动选项卡的标签和图标颜色。
– activeBackgroundColor：活动选项卡的背景颜色。
– inactiveTintColor：非活动选项卡的标签和图标颜色。
– inactiveBackgroundColor：非活动选项卡的背景颜色。
– showLabel：是否显示文字，默认为true。
– style：标签栏的样式对象。
– labelStyle：标签标签的样式对象。
– tabStyle：选项卡的样式对象。
– allowFontScaling：标签字体是否应缩放以尊重文本大小辅助功能设置，默认为true。

navigationOptions

路由页面独立配置：
title：通用标题可以用作备用的headerTitle和tabBarLabel。
tabBarVisible：如果未设置，则默认为true。显示：true或隐藏：false。
tabBarIcon：React元素或给定的函数({ focused: boolean, tintColor: string })返回一个React.Node，以在标签栏中显示。
tabBarLabel：标签栏或React元素中显示的选项卡的标题字符串或给定的函数({ focused: boolean, tintColor: string })返回React.Node，以在标签栏中显示。未定义时，使用title。
tabBarOnPress：点按事件回调处理; 该参数是一个对象，其中包含：
+ previousScene: { route, index }
+ scene: { route, index }
+ jumpToIndex：函数参数，可以控制navigation跳转。

示例：

const RootStack = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        title: 'hahaha',
        tabBarVisible: true,
      }
    },
    Welcome: Welcome,
  },
  {
    initialRouteName: 'Home'
  }
)

2. createMaterialTopTabNavigator

屏幕顶部tab标签栏，可让点击或水平滑动来切换不同的路由。如图：

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig);

RouteConfigs

路由配置对象

TabNavigatorConfig

• initialRouteName – 初始路由的routeName。
• order – 定义选项卡顺序的routeNames数组。
• paths – 提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
• backBehavior – 点击后退按钮是否将标签切换到初始选项卡。如果是，则设置为initialRoute，否则none。默认为initialRoute行为。
• swipeEnabled – 是否允许在标签之间滑动。
• animationEnabled – 改变标签时是否进行动画制作。
• configureTransition– 给定currentTransitionProps和nextTransitionProps返回一个描述选项卡之间动画的配置对象的函数。
• initialLayout– 包含初始height和可选对象width，可以传递以防止[react-native-tab-view](https://github.com/react-native-community/react-native– tab-view#avoid-one-frame-delay)呈现中的一帧延迟。
• tabBarComponent – 可选，覆盖要用作标签栏的组件。
• tabBarOptions – 具有以下属性的对象：
  • activeTintColor – 活动选项卡的标签和图标颜色。
  • inactiveTintColor – 非活动选项卡的标签和图标颜色。
  • showIcon – 是否显示标签图标，默认为false。
  • showLabel – 是否显示标签，默认为true。
  • upperCaseLabel – 是否使标签大写，默认为true。
  • pressColor – 材质纹波的颜色（仅限Android> = 5.0）。
  • pressOpacity – 按下标签的不透明度（仅iOS和Android <5.0）。
  • scrollEnabled – 是否启用可滚动标签。
  • tabStyle – 选项卡的样式对象。
  • indicatorStyle – 选项卡指示符的样式对象（选项卡底部的长条）。
  • labelStyle – 标签标签的样式对象。
  • iconStyle – 选项卡图标的样式对象。
  • style – 标签栏的样式对象。
  • allowFontScaling – 标签字体是否应缩放以尊重文本大小辅助功能设置，默认为true。

navigationOptions

• title：通用标题可以用作备用headerTitle和tabBarLabel。
• swipeEnabled：是否启用滑动切换，如果未设置，则默认为TabNavigatorConfig选项swipeEnabled。
• tabBarIcon：React元素或给定的函数({ focused: boolean, tintColor: string })返回一个React.Node，以在标签栏中显示。
• tabBarLabel：标签栏或React元素中显示的选项卡的标题字符串或给定的函数({ focused: boolean, tintColor: string })返回React.Node，以在标签栏中显示。未定义时，使用场景title。要隐藏，请参阅tabBarOptions.showLabel上一节。
• tabBarOnPress：点击事件回调; 该参数是一个对象，其中包含：
  • previousScene: { route, index }
  • 在scene: { route, index }
  • jumpToIndex：函数参数，可以控制navigation跳转。

3. createMaterialBottomTabNavigator

具有Material设计风格的createBottomTabNavigator组件。
使用此组建需要单独安装：

npm install react-navigation-material-bottom-tabs

此组建依赖react-native-vector-icons，需要单独安装。
使用：

createMaterialBottomTabNavigator(RouteConfigs, MaterialBottomTabNavigatorConfig);

RouteConfigs

路由配置对象

MaterialBottomTabNavigatorConfig

shifting – 是否使用移动样式，活动选项卡会变宽，而不活动选项卡不会有标签。当有三个以上的选项卡时，默认情况下是true。
activeTintColor – 活动选项卡的标签和图标颜色。
initialRouteName – 第一次加载时初始选项卡路由的routeName。
order – 定义选项卡顺序的routeNames数组。
paths – 提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
backBehavior – 点击后退按钮是否将标签切换到初始选项卡。如果是，则设置为initialRoute，否则none。默认为initialRoute行为。

navigationOptions

title：通用标题可以用作备用headerTitle和tabBarLabel。
tabBarIcon：React元素或给定的函数{ focused: boolean, tintColor: string }返回一个React.Node，以在标签栏中显示。
tabBarColor：当屏幕对应的标签处于活动状态时，标签栏的颜色。
tabBarLabel：标签栏或React元素中显示的选项卡的标题字符串或给定的函数{ focused: boolean, tintColor: string }返回React.Node，以在标签栏中显示。未定义时，使用场景title。

4. 嵌套组合

有时候我们需要StackNavigator和TabNavigator结合使用，例如：

const HomeStack = createStackNavigator(
  {
    Home: Home
  }
)
const SettingStack = createStackNavigator(
  {
    Setting: Setting
  }
)
const RootStack = createBottomTabNavigator(
  {
    Home: HomeStack,
    Setting: SettingStack
  }
)

export default class App extends Component {
  render() {
    return <RootStack />
  }
}

这样在Home和Setting两个Tab标签都拥有了独立的导航栈。