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

import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View, Image } from "react-native";
import { StackNavigator, TabNavigator, TabBarBottom } from "react-navigation";

import Home from "./src/pages/Home/index";
import InsuranceCircle from "./src/pages/InsuranceCircle/index";
import InsuranceChurch from "./src/pages/InsuranceChurch/index";
import Mine from "./src/pages/Mine/index";
import Login from "./src/pages/Login";
import AllProduct from "./src/pages/Home/allProduct";
import CommonWebView from "./src/Components/CommonWebView";
import Details from "./src/pages/InsuranceCircle/details";
import CommonImageView from "./src/Components/CommonImageView";
// import SplashScreen from 'react-native-splash-screen'

// export default class ProtectGod extends Component {
  
//       componentDidMount() {
//            // do anything while splash screen keeps, use await to wait for an async task.
//           // SplashScreen.hide();
//       }
//   }
  

// 底部导航栏配置，但也只是作为一个页面，加载到StackNavigator成为第一个页面
const MainTabBar = TabNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: "首页",
      tabBarIcon: ({ focused }) =>
        focused ? (
          <Image source={require("./src/assets/tabbar/ic_home_s.png")} style={styles.icon}/>
        ) : (
          <Image source={require("./src/assets/tabbar/ic_home_n.png")} style={styles.icon}/>
        )
    }
  },
  InsuranceCircle: {
    screen: InsuranceCircle,
    navigationOptions: {
      title: "保圈",
      tabBarIcon: ({ focused }) =>
        focused ? (
          <Image source={require("./src/assets/tabbar/ic_circle_s.png")} style={styles.icon}/>
        ) : (
          <Image source={require("./src/assets/tabbar/ic_circle_n.png")} style={styles.icon}/>
        )
    }
  },
  InsuranceChurch: {
    screen: InsuranceChurch,
    navigationOptions: {
      title: "保堂",
      tabBarIcon: ({ focused }) =>
        focused ? (
          <Image source={require("./src/assets/tabbar/ic_umbrella_s.png")} style={styles.icon}/>
        ) : (
          <Image source={require("./src/assets/tabbar/ic_umbrella_n.png")} style={styles.icon}/>
        )
    }
  },
  Mine: {
    screen: Mine,
    navigationOptions: {
      title: "我的",
      tabBarIcon: ({ focused }) =>
        focused ? (
          <Image source={require("./src/assets/tabbar/ic_mine_s.png")} style={styles.icon}/>
        ) : (
          <Image source={require("./src/assets/tabbar/ic_mine_n.png")} style={styles.icon}/>
        )
    }
  }
},{
  tabBarComponent: TabBarBottom,
  swipeEnabled: true,
  tabBarPosition: 'bottom',
  tabBarOptions: {
    showIcon: true,
    activeTintColor: "#1B9341",
    inactiveTintColor:"rgb(113,113,113)",
    style: {
      backgroundColor: '#fff',
    },
  }
});

const ProtectGod = StackNavigator(
  {
    MainTabBar: { screen: MainTabBar },
    Home: { screen: Home },
    InsuranceCircle: { screen: InsuranceCircle },
    InsuranceChurch: { screen: InsuranceChurch },
    Mine: { screen: Mine },
    Login: { screen: Login },
    AllProduct: {
      screen: AllProduct,
      navigationOptions: { headerTitle: "全部产品" }
    },
    CommonWebView: { screen: CommonWebView },
    CommonImageView:{screen:CommonImageView},
    Details: { screen: Details }
  },{
    navigationOptions: {
      // headerTintColor: "blue",
      headBackTitle:"返回",
      headerStyle: {
        backgroundColor: "white",
      },
      headerTitleStyle:{
        alignSelf:'center'
      },
    }
  }
);

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

AppRegistry.registerComponent("ProtectGod", () => ProtectGod);