[인스타그램클론코딩]#12.1 Auth Components part one(navigation.navigate)

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

 

오늘은 초기 화면에서 로그인 페이지, 계정 생성 화면으로 이동하는 화면을 구성해볼게요.

 

[초기화면]

 

[각각의 버튼을 클릭하여 이동한 화면]

 

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

/** 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/instagram_logo.png")} />
        <Touchable onPress={()=>navigation.navigate("Signup")}>
            <SignUpBtn>
                <SignUpBtnText>Create New Account</SignUpBtnText>
            </SignUpBtn>
        </Touchable>
        <Touchable onPress={()=>navigation.navigate("Login")}>
            <LoginLink>
                <LoginLinkText>Log in</LoginLinkText>
            </LoginLink>
        </Touchable>
    </View>
);

 

resizeMode(reactnative.dev/docs/image#resizemode)

화면 프레임에 이미지 원본이 맞지 않는다면 화면에 맞추기 위한 옵션을 주는 기능.

contain 옵션 : 이미지 원본의 비율(가로,세로길이) 을 유지하면서 해당 화면에 맞추는 옵션

 

require(jongmin92.github.io/2017/01/22/ReactNative/image-res-management(1)/)

특정 경로에 있는 정적인 image 파일을 불러오기 위한 방법이다.

 

navigation.navigate 함수(reactnavigation.org/docs/navigating/#navigating-to-a-new-screen)

navigate 함수를 사용하여 사용자가 이동하고 싶은 페이지로 화면을 이동시켜준다.

이때 스택 화면으로 이동을 시켜준다. 그래서 새로운 화면이 스택형식으로 맨 위에 노출이된다.