[인스타그램클론코딩] #12.1 Auth Components part One (onPress)

안녕하세요 강정호입니다.

 

오늘은 로그인 인증 초기화면과 로그인 화면을 만들어보겠습니다.

 

 

 

AuthHome.js

import React from "react";
import styled from "styled-components";
import { TouchableOpacity } from "react-native-gesture-handler";
import constants from "../../constants";
import AuthButton from "../../components/AuthButton";

/** View 컴포넌트의 스타일 지정 */
const View = styled.View`
    justify-content: center;
    align-items: center;
    flex: 1
`;

const Image = styled.Image`
    width: ${constants.width / 2.5};
    margin-bottom: -20px;
`;

const Touchable = styled.TouchableOpacity``;
const SignUpBtn = styled.View`
    background-color: ${props => props.theme.blueColor};
    padding: 10px;
    margin: 0px 50px;
    border-radius: 4px;
    width: ${constants.width / 2};
    margin-bottom: 25px;

`;
const SignUpBtnText = styled.Text`
    color: white;
    text-align: center;
    font-weight: 600;
`;

const LoginLink = styled.View`

`;

const LoginLinkText = styled.Text`
    color: ${props => props.theme.blueColor}
`;

export default ({navigation}) => (
    <View>
        <Image resizeMode={"contain"} source={require("../../assets/sunflower_logo.png")} />
        <AuthButton 
            text={"Create New Account"}
            onPress={() => navigation.navigate("Signup")}
        />
        <Touchable onPress={()=>navigation.navigate("Login")}>
            <LoginLink>
                <LoginLinkText>Log in</LoginLinkText>
            </LoginLink>
        </Touchable>
    </View>
);

 

AuthButton.js

import React from "react";
import styled from "styled-components";
import constants from "../constants";
import PropTypes from "prop-types";

const Touchable = styled.TouchableOpacity``;
const Container = styled.View`
    background-color: ${props => props.theme.blueColor};
    padding: 10px;
    margin: 0px 50px;
    border-radius: 4px;
    width: ${constants.width / 2};
    margin-bottom: 25px;

`;
const Text = styled.Text`
    color: white;
    text-align: center;
    font-weight: 600;
`;

const AuthButton = ({text, onPress}) => (
    <Touchable onPress={onPress}>
        <Container>
            <Text>{text}</Text>
        </Container>
    </Touchable>

);

AuthButton.propTypes = {
    text: PropTypes.string.isRequired,
    onPress: PropTypes.func.isRequired
};

export default AuthButton;

 

AuthInput.js

import React from 'react';
import styled from "styled-components";
import PropTypes from "prop-types";

const Container = styled.View`
    margin-bottom: 10px;
`;

const TextInput = styled.TextInput`
    
`;

const AuthInput = ({ placeholder, value, keyboardType="default" }) => (
    <Container>
        <TextInput keyboardType={keyboardType} 
                   placeholder={placeholder} 
                   value={value} />
    </Container>
);

AuthInput.propTypes = {
    placeholder: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired,
    keyboardType: PropTypes.oneOf([
        "default",
        "number-pad",
        "decimal-pad",
        "numeric",
        "email-address",
        "phone-pad"
    ])
};

export default AuthInput;