import React from ''react''; //只要在页面中使用了基础组件 都需要导入这句话 不然会报错
import {Button,Platform,ScrollView,SafeAreaView} from ''react-native'';
import { createStackNavigator,
  createAppContainer,
  createBottomTabNavigator,
  createMaterialTopTabNavigator,
  createDrawerNavigator,
  DrawerItems,
  createSwitchNavigator,
 } from ''react-navigation'';
import HomePage from ''../pages/HomePage'';
import Page1 from ''../pages/Page1'';
import Page2 from ''../pages/Page2'';
import Page3 from ''../pages/Page3'';
import Page4 from ''../pages/Page4'';
import Page5 from ''../pages/Page5'';
import Login from ''../pages/Login'';
import Ionicons from ''react-native-vector-icons/Ionicons''
import MaterialIcons from ''react-native-vector-icons/MaterialIcons''


const DrawerNav=createDrawerNavigator(
  {
  Page4:{
    screen:Page4,
    navigationOptions:{
      drawerLabel:''Page4'',
      drawerIcon:({tintColor})=>(
        <MaterialIcons
          name={''drafts''}
          size={24}
          style={{color:tintColor}}
        />
      )
    }
  },
  Page5:{
    screen:Page5,
    navigationOptions:{
      drawerLabel:''Page5'',
      drawerIcon:({tintColor})=>(
        <MaterialIcons
          name={''move-to-inbox''}
          size={24}
          style={{color:tintColor}}
        />
      )
    }
  }
},
{
  initialRouteName:''Page4'',
  contentOptions:{
    activeTintColor:''#e91e63'',
  },
  contentComponent:(props)=>(
    <ScrollView style={{backgroundColor:''#789'',flex:1}}>
      <SafeAreaView forceInset={{top:''always'',horizontal:''never''}}>
        <DrawerItems {...props}/>
      </SafeAreaView>
    </ScrollView>
  )
}
);

const AppTopNavigator=createMaterialTopTabNavigator(
  {
  Page1:{
     screen:Page1,
     navigationOptions:{
       tabBarLabel: ''All''
     }
  },
  Page2:{
     screen:Page2,
     navigationOptions:{
       tabBarLabel: ''iOS''
     }
  },
  Page3:{
     screen:Page3,
     navigationOptions:{
       tabBarLabel: ''Android''
     }
  },
  Page4:{
     screen:Page4,
     navigationOptions:{
       tabBarLabel: ''React-Native''
     }
  },
},
  {
  tabBarOptions:{
    tabStyle:{mindWidth: 50},
    upperCaseLabel:false,//是否使标签大写 默认true
    scrollEndabled:true,//是否支持选项卡滚动 默认false
    style:{
      backgroundColor:''#678''//TabBar背景色
    },
    indicatorStyle:{
      height:2,
      backgroundColor:''white''
    },//标签指示器样式
    labelStyle:{
      fontSize:13,
      marginTop:6,
      marginBottom:6
    },// 文字的样式


  }
}
);

const AppBottomNavigator=createBottomTabNavigator(
  {
    Page1:{
       screen:Page1,
       navigationOptions:{
         tabBarLabel: ''最热'',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={''ios-home''}
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
    Page2:{
       screen:Page2,
       navigationOptions:{
         tabBarLabel: ''趋势'',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={''ios-appstore''} // 全部小写
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
    Page3:{
       screen:Page3,
       navigationOptions:{
         tabBarLabel: ''收藏'',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={''ios-people''}
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
    Page4:{
       screen:Page4,
       navigationOptions:{
         tabBarLabel: ''我的'',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={''ios-aperture''}
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
  },
  {
    tabBarOptions:{
      activeTintColor: Platform.OS === ''ios'' ? ''#e91e63'' : ''#fff'',
    }
  }
);

const AppStack = createStackNavigator({
    Home: {
        screen: HomePage
    },
    Page1: {
        screen: Page1
    },
    Page2: {
        screen: Page2,
        navigationOptions: {//在这里定义每个页面的导航属性，静态配置
            title: "This is Page2.",
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: (props) => {//在这里定义每个页面的导航属性，动态配置
            const {navigation} = props;
            const {state, setParams} = navigation;
            const {params} = state;
            return {
                title: params.title ? params.title : ''This is Page3'',
                headerRight: (
                    <Button
                        title={params.mode === ''edit'' ? ''保存'' : ''编辑''}
                        onPress={()=>{setParams({mode: params.mode === ''edit'' ? '''' : ''edit''})}
                            }
                    />
                ),
            }
        }
    },

    Bottom:{
      screen:AppBottomNavigator,
      navigationOptions:{
        title:''BottomNavigator''
      }
    },

    Top:{
      screen:AppTopNavigator,
      navigationOptions:{
        title:''TopNavigator''
      }
    },

    DrawerNav:{
      screen:DrawerNav,
      navigationOptions:{
        title:''This is DrawNavigator'',

      }
    }
},
 {
    defaultNavigationOptions: {
        // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    }
  }
);

const AuthStack = createStackNavigator({
    Login: {
        screen: Login
    },
},{
    navigationOptions: {
        // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    }
});

const AppStackNavigator = createSwitchNavigator(
    {
        Auth: AuthStack,
        App: AppStack,
    },
    {
        initialRouteName: ''Auth'',
    }
);

const App = createAppContainer(AppStackNavigator)
export default App

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

 import React, {Fragment,Component} from ''react'';
 import {
   StyleSheet,
   View,
   Text,
   Button,
 } from ''react-native'';

 export default class Login extends Component {

   render(){

     const {navigation}=this.props;
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>欢迎来到Login</Text>
         <Button
           title={''Go App''}
           onPress={()=>{
             navigation.navigate(''App'');
           }}
         />


       </View>
       );
   }
 }

 const styles=StyleSheet.create({
   container:{
     flex:1,
   },
   welcome:{
     fontSize:20,
     textAlign: ''center'',
   }

 });