푸딩 2일차

1. Stack Navigation

• 로그인 페이지에서 로그인을 완료하면 메인 탭 화면으로 넘어가야 한다.
• 그러기 위해서 Stack Navigator로 로그인/회원가입 페이지 stack과 메인 tab navigation stack을 stack navigation으로 묶어주어 화면 이동을 했다.

1-1. createStackNavigator

• Screen과 Navigator 두 가지 속성의 객체를 반환하는 함수이다.
• Navigator는 경로를 구성하기 위해 Screen요소를 하위 요소로 포함한다.
• stack으로 쌓을 Screen을 생성한다.

1-2. NavigationContainer

• Navigator 구조의 상위 태그로 작성한다.

1-3. Stack.Navigator

• Stack.Screen을 이용해 콘텐츠를 렌더링한다.

1-4. Stack.Screen

• name : 해당 페이지를 import한 경로 이름을 작성한다.
• component : 경로에 해당 페이지를 import한 구성요소를 지정하여 렌더링한다.

1-5. 화면 구성

//App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import TabNavigation from './navigation/TabNavigation';
//join
import JoinStackScreen from './navigation/JoinStackScreen';

const Stack = createStackNavigator();

function App (){
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="JoinStackScreen">
        <Stack.Screen name="JoinStackScreen" component{JoinStackScreen} />
        <Stack.Screen name="TabNavigation" component={TabNavigation} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

2. 회원가입 페이지1 UI