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

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS,
} from 'react-native';

export default class TabBar extends Component {

    constructor(pros){
        super(pros);
        this.state={
            //默認(rèn)被選中的Item
            selectedTabBarItem:'home'
        }
    }

    render() {
        return (
        <View style={styles.container}>
            {/*頭部*/}
            <View>
                <Text>TabBar練習(xí)</Text>
            </View>
            {/*選項(xiàng)卡*/}
            <TabBarIOS
                barTintColor='black'
                tintColor='purple'

            >
                {/*第一個(gè)*/}
                <TabBarIOS.Item
                    //systemIcon="contacts"
                    title="首頁(yè)"
                    badge="3"
                    selected={this.state.selectedTabBarItem == 'home'}
                    onPress = {()=>{this.setState({selectedTabBarItem:'home'})}}
                >
                <View style={[styles.commonViewStyle,{backgroundColor:'red'}]}>
                    <Text>首頁(yè)</Text>
                </View>
                </TabBarIOS.Item>
                {/*第二個(gè)*/}
                <TabBarIOS.Item
                    systemIcon="bookmarks"
                    selected={this.state.selectedTabBarItem == 'second'}
                    onPress = {()=>{this.setState({selectedTabBarItem:'second'})}}
                >
                <View style={[styles.commonViewStyle,{backgroundColor:'green'}]}>
                    <Text>第二頁(yè)</Text>
                </View>
                </TabBarIOS.Item>
                {/*第三個(gè)*/}
                <TabBarIOS.Item
                    systemIcon="downloads"
                    selected={this.state.selectedTabBarItem == 'three'}
                    onPress = {()=>{this.setState({selectedTabBarItem:'three'})}}
                >
                <View style={[styles.commonViewStyle,{backgroundColor:'blue'}]}>
                    <Text>第三個(gè)</Text>
                </View>
                </TabBarIOS.Item>
                {/*第四個(gè)*/}
                <TabBarIOS.Item
                    systemIcon="search"
                    selected={this.state.selectedTabBarItem == 'four'}
                    onPress = {()=>{this.setState({selectedTabBarItem:'four'})}}
                >
                <View style={[styles.commonViewStyle,{backgroundColor:'purple'}]}>
                    <Text>第四個(gè)</Text>
                </View>
                </TabBarIOS.Item>

            </TabBarIOS>


        </View>
        );
    }
}

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