맛집 앱 만들기 프로젝트 Part6 스크린 구조 및 옵션 설정

스크린 폴더 구조화하기

현재 스크린파일들은 [matzip/front/src/navigations/screens] 밑에 있는데 조금 더 세분화하여 구조화를 진행한다

• screens

  • auth

    • AuthHomeScreen.tsx
    • LoginScreen.tsx
    • SignupScreen.tsx

  • calender

    • CalendarHomeScreen.tsx

  • feed

    • FeedHomeScreen.tsx

  • map

    • MapHoemScreen.tsx

MainDrawerNavigator 코드 작성

[matzip/front/src/navigations/drawer/MainDrawerNavigator.tsx]

로그인된 사용자 화면인 drawer navigator에 피드 화면과 캘린더 화면을 추가하기 위해 코드를 추가한다

• 11, 12번째 줄 feed, calendar 스크린을 추가한다

import {createDrawerNavigator} from '@react-navigation/drawer';
import MapHomeScreen from '../../screens/map/MapHomeScreen';
import FeedHomeScreen from '../../screens/feed/FeedHomeScreen';
import CalendarHomeScreen from '../../screens/calender/CalendarHomeScreen';

const Drawer = createDrawerNavigator();
function MainDrawerNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="MapHome" component={MapHomeScreen} />
      <Drawer.Screen name="FeedHome" component={FeedHomeScreen} />
      <Drawer.Screen name="CalendarHome" component={CalendarHomeScreen} />
    </Drawer.Navigator>
  );
}

export default MainDrawerNavigator;

FeedHomeScreen 코드 작성

[matzip/front/src/navigations/screen/feed/FeedHomeScreen .tsx]

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

function FeedHomeScreen() {
  return (
    <View>
      <Text>피드홈</Text>
    </View>
  );
}

const styles = StyleSheet.create({});

export default FeedHomeScreen;

FeedHomeScreen 코드 작성

[matzip/front/src/navigations/screen/calender/CalendarHomeScreen.tsx]

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

function CalendarHomeScreen() {
  return (
    <View>
      <Text>캘린더</Text>
    </View>
  );
}

const styles = StyleSheet.create({});

export default CalendarHomeScreen;

SignupScreen 코드 작성

[matzip/front/src/navigations/screen/auth/SignupScreen .tsx]

비로그인 사용자인 stack navigation에서 사용할 회원가입 스크린도 간단하게 추가해두도록하자

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

function SignupScreen() {
  return (
    <View>
      <Text>회원가입스크린</Text>
    </View>
  );
}

const styles = StyleSheet.create({});

export default SignupScreen;

constants 상수 파일 코드 수정

[matzip/front/src/constants/navigations.ts]

• 4번째 줄에 회원가입 파라미터로 사용할 SIGNUP을 추가해두었다

const authNavigations = {
  AUTH_HOME: 'AuthHome',
  LOGIN: 'Login',
  SIGNUP: 'Signup',
} as const;

export {authNavigations};

AuthStackNavigator 파일 코드 수정

[matzip/front/src/navigations/stack/AuthStackNavigator.tsx]

• 13번째 줄에 [authNavigations.SIGNUP]: undefined; 를 추가하여 상수화한 SIGNUP도 파라미터 타입으로 지정해두도록 한다
• 42번째 줄에 회원가입 스크린도 추가하도록 한다.

import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import {StyleSheet} from 'react-native';
import AuthHomeScreen from '../../screens/auth/AuthHomeScreen';
import LoginScreen from '../../screens/auth/LoginScreen';
import {authNavigations} from '../../constants';
import SignupScreen from '../../screens/auth/SignupScreen';

export type AuthStackParamList = {
  [authNavigations.AUTH_HOME]: undefined;
  [authNavigations.LOGIN]: undefined;
  [authNavigations.SIGNUP]: undefined;
};
const Stack = createStackNavigator<AuthStackParamList>();
function AuthStackNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        cardStyle: {
          backgroundColor: 'white',
        },
        headerStyle: {
          backgroundColor: 'white',
          shadowColor: 'gray',
        },
        headerTitleStyle: {
          fontSize: 15,
        },
        headerTintColor: 'black',
      }}>
      <Stack.Screen
        name={authNavigations.AUTH_HOME}
        component={AuthHomeScreen}
        options={{headerTitle: '', headerShown: false}}
      />
      <Stack.Screen
        name={authNavigations.LOGIN}
        component={LoginScreen}
        options={{headerTitle: '로그인'}}
      />
      <Stack.Screen
        name={authNavigations.SIGNUP}
        component={SignupScreen}
        options={{headerTitle: '회원가입'}}
      />
    </Stack.Navigator>
  );
}

const styles = StyleSheet.create({});

export default AuthStackNavigator;

AuthHomeScreen 파일 코드 수정

[matzip/front/src/navigations/screen/auth/AuthHomeScreen.tsx]

• 15번째 줄에 회원가입 버튼도 추가해두도록 한다

import {StackScreenProps} from '@react-navigation/stack';
import React from 'react';
import {Button, SafeAreaView, StyleSheet, View} from 'react-native';
import {AuthStackParamList} from '../../navigations/stack/AuthStackNavigator';
import {authNavigations} from '../../constants';

type AuthHomeScreenProps = StackScreenProps<AuthStackParamList>;
function AuthHomeScreen({navigation}: AuthHomeScreenProps) {
  return (
    <SafeAreaView>
      <View>
        <Button
          title="로그인화면으로 이동"
          onPress={() => navigation.navigate(authNavigations.LOGIN)}></Button>
        <Button
          title="회원가입으로 이동"
          onPress={() => navigation.navigate(authNavigations.SIGNUP)}></Button>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({});

export default AuthHomeScreen;