React Navigation (리액트 네비게이션) 설치 및 Stack 에제

React Native

by theseung 2021. 2. 18. 02:19

#설치

npm install @react-navigation/native

#Expo 기반 프로젝트에서 추가 설치

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

#Bare React Native 기반 프로젝트에서 추가 설치

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

리액트 네비게이션의 구성

NavigationContainer 컴포넌트, Navigator 컴포넌트, Screen 컴포넌트

NavigatorContainer 컴포넌트

내비게이션의 계층 구조와 상태를 관리하는 컴포넌트
모든 네비게이션 구조를 감싼 최상위

Navigator 컴포넌트

화면으로 관리하는 중간관리자 컴포넌트
여러개의 Screen을 자식으로 두고 있음

Screen 컴포넌트

화면으로 사용되는 컴포넌트
name(화면 이름), component(화면으로 사용될 컴포넌트)를 속성으로 지정해야함.

Stack 네비게이션의 구성

Stack 네비게이션은 이름처럼 쌇이는 네비게이션이다.

가장, 먼저 Stack 네비게이션을 추가해주어야 한다. (아마, 네비게이션의 종류별로 따로 추가해주는 듯 하다.

npm install @react-navigation/stack

아래 코드는 Stack Navigation을 만드는 코드이다.

1. 어떤 종류의 네비게이션을 만들든 항상 필요한 NavigationContainer 컴포넌트를 추가해 주었다.

2. 해당 네비게이션은 stack을 만들 것이기 때문에 관련 함수를 추가하였다.

3. 네비게이션에서 사용할 화면을 가져왔다.

4. 이 후 구조는 앞서 설명한 대로 NavigatorContainer, Navigator, Screen 순서대로 배치하였다.

//NavigationContainer 추가
import { NavigationContainer } from '@react-navigation/native';

//Stack에서 작동하는 Navigator와 Screen을 추가
import { createStackNavigator } from '@react-navigation/stack';

//네비게이션에서 사용할 화면 가져오기
//여기서 화면은 우리가 흔히 볼 수 있는 컴포넌트 이다.
import { Join } from '../Screen';

//Stack Navigation만들기
const Stack = createStackNavigator();

const LoginNavigation = ({}) => {
  <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
        	name="Join" 
        	component={Join}
        	options={{
          		headerShown: false,
        	}} 
        />
        <Stack.Screen 
        	name="Join2" 
        	component={Join}
        />
      </Stack.Navigator>
  </NavigationContainer>
}

export default LoginNavigation;

* 주의 사항

1. screen에서 component는 겹쳐도 별도의 에러가 없다. 다만, name값은 겹치면 오류가 나고 실행이 안된다.

Stack의 Screen에 들어갈 수 있는 옵션

Screen에는 위에서 headerShown을 적은 것 처럼 다양한 옵션이 들어갈 수 있다.

주로 내 기준에서 자주 사용되는 옵션을 몇가지 알아보고자 한다.

headerShown
- 들어가는 값 : Boolean (기본값 true)
- Screen에 표시되는 header를 없앨 수 있다.
headerTransparent
- 들어가는 값 : Boolean (기본값 false)
- Screen에 표시되는 header를 투명하게 만들 수 있다. 투명하게 만드는 동시에 내용과 헤더가 겹치게 뜬다.
headerStatusBarHeight
- 들어가는 값 : Number
- header의 높이를 설정해 줄 수 있다. 정확한 기본값이 공식 문서에 명시되어 있지 않아 알 수 없었지만 직접 테스트 결과 30 정도의 값이 였다. (!아닐 수 있음!)
title / headerTitle
- 들어가는 값 : String (기본값은 Screen에 들어가는 name 속성 값)
- header에 출력되는 제목을 설정해 줄 수 있다. title을 사용하면 headerTitle을 호출해서 사용한다고 한다.
  편한걸로 사용하면 될 듯...
headerTitleAlign
- 들어가는 값 : "left" 또는 "center" (안드로이드 기본값은 "left", IOS는 "center")
- 제목이 표시되는 위치이다. 안드로이드와 IOS의 기본값이 다르다.
headerBackTitle
- 들어가는 값 : String
- 안드로이드의 경우 header에 뒤로가기 아이콘이 표시되지만 IOS의 경우 전 화면의 headerTitle 또는 "Back"이 표시된다. 이를 수정해 줄 수 있는 값이다.
  기본값은 이전화면의 headerTitle이라고 하지만 제목이 길거나 출력하기 어려운 경우 "Back"으로 표시된다.