import React from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button,
  ScrollView,
  StyleSheet,
  Image,
} from 'react-native';

import {TabNavigator} from 'react-navigation';

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
 

    tabBarIcon: () => (
     <View>
          <Image
             source={require('./img/icon_1.png')}
             style={styles.icon}
          />
     </View>  
    ),
  };

  render() {
    return (
      <Button
        // onPress={() => this.props.navigation.navigate('Notifications')}
 

        title=" home "
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  render() {
    return (
      <Button
        // onPress={() => this.props.navigation.goBack()}
        title="notifications"
      />
    );
  }
}

MyNotificationsScreen.navigationOptions =
 
 {
	//tab標籤
    tabBarLabel: 'Notifications',
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('./img/icon_1.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
};

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

const MyFirstProject = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {

  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
  //// tabBar 顯示的位置 ，android 預設是顯示在頁面頂端的 
  tabBarPosition: 'top',
  animationEnabled: false, // 切換頁面時是否有動畫效果
  swipeEnabled: true, // 是否可以左右滑動切換tab 如果設定這個屬性，這事例中下面設定的按鈕 Go back home | Go to notifications就不好使了
  backBehavior: 'none', // 按 back 鍵是否跳轉到第一個Tab(首頁)， none 為不跳轉 
  //第一次載入時，顯示的tab
  initialRouteName : 'Home',
  tabBarOptions: {
          activeTintColor: '#fff', // 文字和圖片選中顏色
          inactiveTintColor: '#999', // 文字和圖片未選中顏色
          showIcon: true, // android 預設不顯示 icon, 需要設定為 true 才會顯示
          showLabel: true, // android 是否展現文字 預設 true 
          upperCaseLabel : false, //android 文字是否需要大寫 預設true 
          pressColor : 'blue', // android 按壓時顯示的顏色 
          scrollEnabled : false,
          indicatorStyle: {
              height: 2  // 如TabBar下面顯示有一條線，可以設高度為0後隱藏
          }, 
          style: {
              backgroundColor: '#ff6449', // TabBar 背景色
              // height: 50,
          },
          labelStyle: {
              fontSize: 15, // 文字大小
              paddingTop:0,
              marginTop:0,
          },
          tabStyle:{
              marginTop:10,
              height: 50,
          },
  },
});

AppRegistry.registerComponent('MyFirstProject', () => MyFirstProject);