import React from "react"
import { StyleSheet } from "react-native"
import { createBottomTabNavigator } from "react-navigation-tabs"
import { createAppContainer } from "react-navigation"
import MainPage from "./MainPage"
import MessagePage from "./MessagePage"
import GamePage from "./GamePage"
import MyPage from "../page/MyPage"
import Entypo from "react-native-vector-icons/Entypo"
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"
import AntDesign from "react-native-vector-icons/AntDesign"


export default class HomePage extends React.Component {
    _tabNavigator() {
        return createAppContainer(
            createBottomTabNavigator({
                MainPage: {
                    screen: MainPage,
                    navigationOptions: {
                        tabBarLabel: "主页",
                        tabBarIcon: ({ tintColor, focused }) => (
                            <MaterialCommunityIcons
                                name={"home-heart"}
                                size={26}
                                style={{ color: tintColor }}
                            />
                        )
                    }
                },
                MessagePage: {
                    screen: MessagePage,
                    navigationOptions: {
                        tabBarLabel: "消息",
                        tabBarIcon: ({ tintColor, focused }) => (
                            <AntDesign
                                name={"message1"}
                                size={26}
                                style={{ color: tintColor }}
                            />
                        )
                    }
                },
                GamePage: {
                    screen: GamePage,
                    navigationOptions: {
                        tabBarLabel: "游戏",
                        tabBarIcon: ({ tintColor, focused }) => (
                            <Entypo
                                name={"game-controller"}
                                size={26}
                                style={{ color: tintColor }}
                            />
                        )
                    }
                },
                MyPage: {
                    screen: MyPage,
                    navigationOptions: {
                        tabBarLabel: "我的",
                        tabBarIcon: ({ tintColor, focused }) => (
                            <AntDesign
                                name={"smileo"}
                                size={26}
                                style={{ color: tintColor }}
                            />
                        )
                    }
                }
            })
        )
    }
    render() {
        const Tab = this._tabNavigator()
        return <Tab />
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#0f0"
    }
})