무작정 프로젝트 해보기 - 5 (주문페이지 완성, 네비게이션 추가, 메뉴 페이지 추가)

오늘처음해요·2024년 2월 22일

주문 페이지 완성

직접 만든 페이지

배민 레퍼런스

일단 첫 페이지 껍데기는 완성되었네요

네비게이션 기능 추가하기 (라우팅)

리액트 네이티브에서는 react-router 말고
React Navigaion이라는 라이브러리가 쓰인다

특징적인 것은 이동한 히스토리가 Stack 형식으로 남아서
뒤로 가기를 편하게 할 수 있고
계속 쌓이기 때문에 reset, popToTop 등으로 관리를 해줘야 한다.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const customStackNavigaionOptions = {
  headerShown: false,
};

export default function App() {
  loadFonts();
  return (
    <NavigationContainer>
        <AppView>
          <Stack.Navigator
            initialRouteName={'Home'}
            screenOptions={customStackNavigaionOptions}
          >
            <Stack.Screen name="Home" component={MenuSelectPage} />
            <Stack.Screen name="MenuOrder" component={MenuOrderPage} />
          </Stack.Navigator>
        </AppView>
    </NavigationContainer>
  );
}

const Stack = createNativeStackNavigator();
createNativeStackNavigator()는 Screen, Navigator 두 개의 프로퍼티가 있고

네비게이터는 스크린 요소를 가질 수 있고 라우트로 배치한다
보통 App.js의 루트에 위치한다

나는 헤더를 따로 디자인 해줘서 커스텀 옵션으로 안보이게 설정해줬다

react-router처럼 옮겨다닐 페이지 위에 컨테이너를 하나두고
밑에는 <Route>처럼 <Stack>을 활용해서 구성하면 된다

버튼에 이벤트로 활용할 때

// MenuSelectPage.js
import { useNavigation } from '@react-navigation/native';
import { TouchableOpacity } from 'react-native';
import styled from 'styled-components';

const SelectView = styled.View`
  align-items: center;
  justify-content: center;
  top: 50%;
`;
const SelectText = styled.Text`
  text-align: center;
`;

const MenuSelectPage = () => {
  const navigation = useNavigation();
  return (
    <SelectView>
      <TouchableOpacity onPress={() => navigation.navigate('MenuOrder')}>
        <SelectText>장바구니</SelectText>
      </TouchableOpacity>
    </SelectView>
  );
};

export default MenuSelectPage;