[React-Navigation] 페이지 이동

강빈·2021년 10월 18일
1

Mobile App

목록 보기
4/11

개발이 필요한 페이지가 로그인페이지를 포함하여 대략 5페이지 정도가 된다.
그래서 routing에 대해 알아봤는데,
웹에서의 routing이 RN에서는 stack이라는 개념으로 불리고 있었다.
웹에서는 url이 있어 페이지 이동 시에 사용할 수 있지만 앱에서는 없기 때문에,
stack형태로 각 페이지를 담아두고, 불러오기 때문이다.

stack을 사용하기 위해 react-navigation이라는 라이브러리를 사용해보려고 한다.
굉장히 다양한 라이브러리를 설치해야 한다.
왜 하나로 통합하지 않았는지 모르겠다.
@react-native-community/masked-view
@react-navigation/native
@react-navigation/native-stack
@react-navigation/stack
react-native-gesture-handler
react-native-reanimated
react-native-screens
설치를 다 하면 최상위 폴더에 스택 선언과 NavigationContainer로 감싸준다.

import 'react-native-gesture-handler'
import React, { useState } from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import Login from './Layout/Login';
import AccountSelect from './Layout/AccountSelect';
import MediaSelect from './Layout/MediaSelect';

const Stack = createNativeStackNavigator();
enableScreens();
const App: () => Node = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Login"
      >
        <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
        < Stack.Screen name="AccountSelect" component={AccountSelect} />
        <Stack.Screen name="MediaSelect" component={MediaSelect} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

이런 식인데, react-navigation 공식 문서에 따르면 파일 최상단에 import 'react-native-gesture-handler'를 반드시 해줘야 한다고 한다.
스택 컨테이너로 감싸고, 그 안에 Form Group 같은 형태와 같이 네비게이터로 감싸고, 안에 각각의 페이지가 Screen이라는 이름으로 호출된다. 이 때, name은 반드시 지정해줘야 하며, component에서 함수호출로 부르면 된다.

react-navigation을 쓰기 전에 최상단파일에서 컴포넌트를 <SafeAreaView>로 감싸주고 있었다. 아이폰X 이후부터 노치 디자인이 생겼고, 기존 방식대로 하면 이 노치 디자인이 가리는 부분이 생겼다. 이를 방지하기 위해 SafeAreaView라는 노치높이만큼의 여유마진을 가지는 컴포넌트를 사용했다.
SafeAreaView와 react-navigation을 같이 사용하니 <Stack.Screen>으로 부르고 있는 컴포넌트들이 호출되지 않았다.
<Stack.Screen name="Login" component={Login} />에서 Login 화면이 보이지 않았다. 다만, 위에 헤더에서 Login이라는 이름은 보였다.
왜 그런지 생각을 안 하고 있었는데,


react-navigation을 사용하면 자동으로 헤더 부분이 생기면서 노치가 가리는 부분을 침범하지 않기 때문인 것 같다. 이는 아래의 옵션처럼 헤더를 보이지 않게 해도 동일했다.

screenOptions=
{{
headerShown: false
}}

SafeAreaView는 그냥 쓰라길래 생각 없이 넣었다가, 충돌 나서 찾는데 시간이 많이 걸렸다.
왜 쓰는지는 앞으로 잘 찾아보도록 하자.

1개의 댓글

comment-user-thumbnail
2024년 1월 3일

그래보도록 하자 🥲

답글 달기