import React, { Component } from "react";
import { createBottomTabNavigator } from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";

import Artile from "../pages/Artile";
import Home from "../pages/Home";
import My from "../pages/My";

const Bottoms = createBottomTabNavigator(
  {
    Home
 
: {
      navigationOptions: {
        title: "帖子"
      },
      screen: Home
    },
    Artile: {
      navigationOptions: {
        title: "釋出"
      },
      screen: Artile
    },
    My: {
      navigationOptions: {
        title: "我的"
      },
      screen: My
    }
  },
  {
    navigationOptions
 
: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Home") {
          iconName = `ios-document${focused ? "" : "-outline"}`;
        } else if (routeName === "Artile") {
          iconName = `ios-create${focused ? ""
 
 : "-outline"}`;
        } else if (routeName === "My") {
          iconName = `ios-person${focused ? "" : "-outline"}`;
        }
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      }
    })
  }
);
export default class BottomNav extends Component {
  render() {
    return <Bottoms />;
  }
}