底部栏路由

import React from "react";

import Ionicons from "react-native-vector-icons/Ionicons";

import { createBottomTabNavigator } from "react-navigation";

import Home from "./Home";

import Details from "./Details";

import Route2 from "../src2/Reoute2";

const Route = createBottomTabNavigator(

  {

    Home: {

      screen: Home,

      navigationOptions: {

        title: "首页"

      }

    },

    Route2: {

      screen: Route2,

      navigationOptions: {

        title: "消息"

      }

    },

    Details: {

      screen: Details,

      navigationOptions: {

        title: "我的"

      }

    }

  },

  {

    //谁设置文本选中前后效果颜色

    tabBarOptions: {

      activeTintColor: "#FF0000", //激活文本图片样式

      inactiveTintColor: "#0000FF", //未激活文本图片样式

      activeBackgroundColor: "#2296F3", //激活背景样式

      inactiveBackgroundColor: "#ffffff" //未激活背景样式

    },

    navigationOptions: ({ navigation }) => ({

      tabBarIcon: ({ focused, tintColor }) => {

        const { routeName } = navigation.state;

        let iconName;

        if (routeName === "Home") {

          //切换不同的图标

          //iconName = `ios-document${focused ? "" : "-outline"}`;

          //iconName = `${focused ? "ios-document" : "ios-document-outline"}`;

          iconName = "ios-document";

        } else if (routeName === "Route2") {

          iconName = "ios-create";

        } else if (routeName === "Details") {

          iconName = "ios-person";

        }

        return <Ionicons name={iconName} size={25} color={tintColor} />;

      }

    })

  }

);

export default Route;