import React, { Component } from 'react';
import {
    AppRegistry,
    Dimensions,
    StyleSheet,
    View,
    Text,
    Button,
    Image,
} from 'react-native';
import { TabNavigator } from "react-navigation";
let ScreenWidth = Dimensions.get('window').width;
let ScreenHeight = Dimensions.get('window').height;


class MyHomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: '首頁',
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('./img/t1.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <View><Text>這是第一個頁面</Text></View>
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: '我的',
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('./img/t3.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };
  render() {
    return (
      <View><Text>這是第2個頁面</Text></View>
    );
  }
}

class SearchScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: '找房',
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('./img/t2.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };
  render() {
    return (
      <View><Text>這是第3個頁面</Text></View>
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 25,
    height: 25,
  },
});

const MyApp = TabNavigator(
  {
    Home: {
      screen: MyHomeScreen,
    },
    Notifications: {
      screen: MyNotificationsScreen,
    },
    Search: {
      screen: SearchScreen,
    },
  },
  {
    tabBarPosition:"bottom",
    swipeEnabled:false,
    tabBarOptions: {
      activeTintColor: '#333',
      inactiveBackgroundColor: "#f1f1f1",//IOS
      inactiveTintColor:"#666",
      showIcon:true,
      labelStyle: {
        fontSize: 12,
        color:"#666",
      },
      style: {
        borderTopWidth:1,
        borderTopColor:'#ccc',
        backgroundColor: '#f1f1f1', //android
      },
      indicatorStyle:{
        height:0,
      },
    },
  }
);

module.exports = MyApp;