[인스타그램클론코딩] #11.1 AuthNavigation (React Navigation)

 

 

React Native Gesture Handler

docs.swmansion.com/react-native-gesture-handler/docs/

Getting Started | React Native Gesture Handler

사용 목적 : 리액트 네이티브에 내장된 React Native's Gesture Responder System을 개선하기 위한 라이브러리. 터치에 대한 반응 시스템을 개선하였다. 예를 들면 Pinch, Rotation 등등 다양한 터치 반응에 반응하기 위해 사용하는 라이브러리

 

createStackNavigator

reactnavigation.org/docs/stack-navigator/

import React from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import Signup from "../screens/Auth/Signup";
import AuthHome from "../screens/Auth/AuthHome";
import Login from "../screens/Auth/Login";
import Confirm from "../screens/Auth/Confirm";

const AuthNavigation = createStackNavigator(
        {
                AuthHome, 
                Signup, 
                Login, 
                Confirm
        },
        {
                //headerMode: "none"
        }
);

export default createAppContainer(AuthNavigation);

stackNavigator는 아이폰, 안드로이드 화면에서 새로운 화면이 로딩 될 때 스택처럼 새롭게 로딩되는 화면이 맨 위로 올라와서 보여지는 것을 구현할 수 있는 함수이다.

위의 코드에서는 createStackNavigator를 호출하면서 매개변수로 4개의 화면(AuthHome, Signup, Login, Confirm)을 넣었다.

reactnavigation.org/assets/navigators/stack/stack.mov

 

 

위의 AuthNavigation을 아래와 같이 호출합니다

import React, { useContext } from "react";
import { Text, View, TouchableOpacity } from "react-native";
import { useIsLoggedIn, useLogIn, useLogOut } from "../AuthContext";
import AuthNavigation from "../navigation/AuthNavigation";


export default () => {
    const isLoggedIn = useIsLoggedIn();
    const logIn = useLogIn();
    const logOut = useLogOut();

    return (
        <View style={{ flex: "1"}}>
            {isLoggedIn ? (
                <TouchableOpacity onPress={logOut}>
                    <Text>Log Out</Text>
                </TouchableOpacity>
            ) : (
                <AuthNavigation />
            )}
        </View>
    );
};

isLoggedIn 로그인 여부값을 기준으로 AuthNavigation을 호출합니다.