import React, {Component} from 'react';
import {View, StyleSheet, Text, Image} from 'react-native';
import CustomButton from '../components/CustomButton';
const Login = () => {
return (
<View style={styles.container}>
<View style={styles.header}><Text></Text></View>
<View style={styles.title}>
<Image style={styles.logo} source={require('../imgs/jjacksparrowLogo.png')}/>
</View>
<View style={styles.subTitle}>
<Text style=>지금 JJACK SPARROW에 가입하면</Text>
<Text style=>20% 할인 이벤트 쿠폰을 드려요!</Text>
</View>
<View style={styles.content}>
<Text style=>회원가입/로그인</Text>
<CustomButton buttonColor={'white'} border={'#aaa'} icon='google' title={'Google 계정으로 계속하기'} test_e={()=>alert('GOOGLE')}/>
<CustomButton buttonColor={'white'} border={'#aaa'} icon='mobile' title={'휴대폰 번호로 계속하기'} test_e={()=>alert('MOBILE')}/>
<CustomButton buttonColor={'white'} border={'#aaa'} icon='apple' title={'아이클라우드 계정으로 계속하기'} test_e={()=>alert('IPHONE')}/>
<View style={styles.extra}>
<Text style=>* 휴대폰 번호가 변경되셨나요?</Text>
<Text style=>이메일로 계정찾기</Text>
</View>
</View>
<View style={styles.footer}>
<Text style=>고객 센터 (문의하기)</Text>
<Text style=>사업자 정보 보기</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
backgroundColor: 'white',
},
header: {
flex: 0.2,
width:'100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
title: {
flex: 1.1,
width:'100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
logo:{
width:'80%',
height:'80%',
},
subTitle: {
flex: 0.2,
width:'100%',
alignItems: 'center',
backgroundColor:'white',
padding:'10%',
},
content: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
extra:{
flexDirection:'row',
width:'80%',
justifyContent: 'space-between',
},
footer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
width:'100%',
height:'20%',
backgroundColor: 'white',
},
});
export default Login;