react-navigation创建顶部TabBar

TabBar所在位置

API

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig):

• RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现。
• TabNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。

RouteConfigs

• screen(必选)：指定一个 React 组件作为屏幕的主要显示内容，当这个组件被TabNavigator加载时，它会被分配一个navigation prop；
• navigationOptions(可选)：用以配置全局的屏幕导航选项如：title、headerRight、headerLeft等；

TabNavigatorConfig

• tabBarComponent：指定TabNavigator的TabBar组件；
• tabBarPosition: 用于指定TabBar的显示位置，支持’top’ 与 ‘bottom’两种方式；
• swipeEnabled : 是否可以左右滑动切换tab；
• lazy - 默认值是 false。如果是true，Tab 页只会在被选中或滑动到该页时被渲染。当为 false 时，所有的 Tab 页都将直接被渲染；（可以轻松实现多Tab 页面的懒加载）；
• optimizationsEnabled -是否将 Tab 页嵌套在到 中。如果是，一旦该 Tab 页失去焦点，将被移出当前页面, 从而提高内存使用率。
• animationEnabled : 切换页面时是否有动画效果。
• initialLayout : 包含初始高度和宽度的可选对象可以被传递以防止react-native-tab-view呈现中的一个帧延迟；
• tabBarOptions: 配置TaBar下文会详细讲解；
• initialRouteName : 默认页面组件，TabNavigator显示的第一个页面；
• order: 定义tab顺序的routeNames数组。
• paths: 提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
• backBehavior: 后退按钮是否会导致标签切换到初始tab？ 如果是，则设切换到初始tab，否则什么也不做。 默认为切换到初始tab。

tabBarOptions

• activeTintColor: 设置TabBar选中状态下的标签和图标的颜色；
• inactiveTintColor: 设置TabBar非选中状态下的标签和图标的颜色；
• showIcon: 是否展示图标，默认是false；
• showLabel: 是否展示标签，默认是true；
• upperCaseLabel - 是否使标签大写，默认为true。
• tabStyle: 设置单个tab的样式；
• indicatorStyle: 设置 indicator(tab下面的那条线)的样式；
• labelStyle: 设置TabBar标签的样式；
• iconStyle: 设置图标的样式；
• style: 设置整个TabBar的样式；
• allowFontScaling: 设置TabBar标签是否支持缩放，默认支持；
• pressColor -Color for material ripple（仅支持 Android >= 5.0；
• pressOpacity -按下标签时的不透明度（支持 iOS 和 Android < 5.0）；
• scrollEnabled -是否支持 选项卡滚动

例子

• 创建一个基本路由(可以是底部tabBar，或者是stack页面),
• 创建顶部TabBar
• Api createAppContainer 实例化

创建基本路由

import React, { Component } from 'react';
import {createBottomTabNavigator} from 'react-navigation';
import Index from '../page/Index';
import Mine from '../page/Mine';

export default BottomTabBar = createBottomTabNavigator({
  Index:{
    screen: Index,
    navigationOptions: () => ({
      title: '首页'
    })
  },
  Mine:{
    screen: Mine,
    navigationOptions: () => ({
      title: '我的'
    })
  }
},
{
  initialRouteName: 'Index',
  tabBarOptions: {
    showIcon: false,
    activeTintColor: '#1985EA'
  }
});

创建TabBar路由

import { createMaterialTopTabNavigator } from 'react-navigation';
import Detail from '../page/Detail';
import Person from '../page/Person';

export default TopTab = createMaterialTopTabNavigator({
  Detail: {
    screen: Detail,
    navigationOptions: {
      title: "详情"
    }
  },
  Person: {
    screen: Person,
    navigationOptions: {
      title: "我的"
    }
  }
}, {
  tabBarOptions: {
    // upperCaseLabel: false
  }
});

接下来我们把第一步的路由更改一下

import React, { Component } from 'react';
import {createBottomTabNavigator} from 'react-navigation';
import Index from '../page/Index';
import Mine from '../page/Mine';
import TopTab from './TopTab'; // =>引入tab页面

export default BottomTabBar = createBottomTabNavigator({
  Index:{
    screen: TopTab,  // =>把屏幕显示地址更改为tab路由
    navigationOptions: () => ({
      title: '首页'
    })
  },
  Mine:{
    screen: Mine,
    navigationOptions: () => ({
      title: '我的'
    })
  }
},
{
  initialRouteName: 'Index',
  tabBarOptions: {
    showIcon: false,
    activeTintColor: '#1985EA'
  }
});

把路由在根页面实例化

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {createAppContainer} from 'react-navigation';
import BottomTabBar from './src/router/BottomTabBar';

const Navigator = createAppContainer(BottomTabBar)
export default class App extends Component {
  render() {
    return (
      
    );
  }
}

记录学习，写的不对的地方，欢迎指正