#2 使用 'createBottomTabBar

在React Navigation V1中使用 TabNavigator 创建tab bar 导航，在最新的 V2.11.2 中，可以选择的方式比较多：

• createTabNavigator 这个版本中已被弃用，尽量使用下面的方式

• createBottomTabNavigator 路由被懒加载，屏幕组件�(Screen Component)在第一次聚焦之前不会载入

• createMaterialBottomTabNavigator(需要安装 react-navigation-material-bottom-tabs,如果不使用Expo,则还需要安装 react-native-vector-icons 作为依赖，下一节再讲)

• createMaterialTopNavigator

• react-native-material-bottom-navigation 注意这个和上面react-navigation-material-bottom-tabs 的区别

基本用法

# 引入
import { createBottomTabNavigator } from 'react-navigation';

# 语法
createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);

示例

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

class Home extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
          主页
        </Text>
      </View>
    );
  }
}
class Settings extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
          设置页面
        </Text>
      </View>
    );
  }
}

export default createBottomTabNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      tabBarLabel: '主页', // tab的标签名
      tabBarIcon: ({ focused, tintColor }) => (
        <Icon name='ios-home' color={tintColor} size={24} />
      ),
    }
  },
  Settings: {
    screen: Settings,
    navigationOptions: {
      tabBarLabel: '设置', // tab的标签名
      tabBarIcon: ({ tintColor }) => (
        <Icon name='ios-settings' color={tintColor} size={24} />
      ),
    }
  },
}, { // 路由配置
  initialRouteName: 'Settings', // 初始tab bar 页面
  order: ['Settings', 'Home'], // tab bar的显示顺序
  navigationOptions: {
    tabBarVisible: true, // 是否显示tab bar 默认是true
  },
  tabBarOptions: {
    // 用来style tab bar
    activeTintColor: 'orangered', // 激活时的样式
    inactiveTintColor: 'grey',
    swipeEnabled: true,
    tabStyle: {
      // backgroundColor: 'pink'
    },
    style: {
      backgroundColor: 'blue',
    },
  },
})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

RouteConfigs里面navigationOptions属性说明

• title: 可用于 headerTitle 和 tabBarLabel 的fallback 标题

• tabBarIcon: React 元素 或者 给定 {focused: boolean, tintColor} 的函数返回的React.Node

• tabBarLabel: 标签栏或者React元素中显示选项卡的标题字符串或者 给定 {focused: boolean, tintColor} 的函数返回的React.Node，用于显示在标签栏中。未定义时，使用场景title。 要隐藏，请参阅tabBarOptions.showLabel。

• tabBarButtonComponent: React组件，它包装图标和标签，并实现onPress.默认情况下是TouchableWithoutFeedback的一个封装，使其其表现与其它可点击组件相同.比如将其改为 tabBarButtonComponent: TouchableOpacity。则表示用 TouchableOpacity 代替默认的 TouchableWithoutFeedback对组件进行封装

• tabBarOnPress: 处理点击事件的回调,在开始转换到下一个场景之前添加自定义逻辑（点击的场景）

  。改参数是一个对象

  • navigation: 页面中的navigation props
  • defaultHandler: tab press 的默认handler

更多配置：

• bottom-tab-navigator