[React Native] Navigation 기능.

728x90

React native에서 앱을 만들때 꼭 필요한 기능에 대해 알아보자.

React Native에서 페이지간 이동을 하기위해서는 navigation이 필요하다.

React Native Navigation란?

React Native 애플리케이션의 ‘페이지 이동’을 하는 내비게이션을 관리하고 구현하는 데 도움이 되는 라이브러리이다. 라이브러리는 React Native의 다양한 기능을 활용하여 내비게이션을 관리하며, iOS와 Android를 모두 지원한다.

Navigation에는 다양한 종류가 있다. 순서대로 알아보도록 하자.

1. Native Stack Navigator

스택 형태로 화면 위에 새로운 화면을 쌓아서 탐색을 하는 네비게이션 컴포넌트이다.
일반적으로 많이 사용되며 스택형태로 쌓아두기 때문에 이전화면으로 쉽게 되돌아 갈 수 있으며 탐색 히스토리를 유지한다. 페이지 전환이나 이동이 많은 앱에 적합하다.

예를 들어, A 화면에서 버튼을 누르면 B 화면으로 이동하고, B 화면에서 다시 버튼을 누르면 A 화면으로 돌아오는 경우에 사용할 수 있다.기본적으로 스택 네비게이터는 iOS에서는 새 화면으로 이동 시 오른쪽에서 슬라이드 되고 Andriod에서는 OS 기본 애니메이션이 사용된다.

2. TabNavigator

탭 형태로 화면을 전환하는 네비게이션 컴포넌트이다.

예를 들어, 메뉴화면에서 탭을 선택하면 해당하는 화면으로 전환되는 경우에 사용할 수 있다.

3. DrawerNavigator

슬라이딩 형태로 화면을 전환하는 네비게이션 컴포넌트이다.

예를 들어, 메뉴화면에서 왼쪽에서 슬라이딩으로 화면을 띄우면 해당하는 화면으로 전환되는 경우에 사용할 수 있다.

3가지 Navigator 중 Native Stack Navigator에 대해서 좀 더 자세히 알아보자.

- 설치방법

yarn add @react-navigation/stack @react-navigation/native

콘솔창에 다음과 같이 입력해서 라이브러리를 설치하여 준다.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/viewpoint

또한 필요한 종속성도 같이 설치하여 준다.

- 정의

다음과 같이 앱의 최상위 컴포넌트에서 NavigationContainer를 사용하여 네비게이션을 감싸준다.

- 활용

위와 같이 뒤로 이동하는 버튼을 눌러 이전화면으로 이동할 수 있다.

<Text

onPress={() =>

navigation.navigate('SignUpScreen')

}

style={styles.login_page_signup_btn}

또는 버튼을 눌러 특정 페이지로 이동이 가능하게 설정할 수 있다.

route.params

또한 화면전환을 할때 필요한 데이터값들이 다른페이지에 머물러 있는경우가 있다.

이런경우에 route.params을 사용한다면 다른페이지의 있는 변수값들도 페이지 이동시에 가져올 수 있다.

React Navigation의 Stack Navigator에서 route parameters를 사용하려면, 각 스크린의 컴포넌트에서 route prop을 통해 전달된 파라미터에 접근할 수 있다.

route.params를 사용한다면 다음과 같이 이전 페이지의 변수값들을 가져와서 이 페이지에서 사용할 수 있다.