1. @react-navigation/native

1) 정의

RN에서 네비게이션을 다루는 라이브러리 중 가장 유명한 라이브러이다.
사실상 현 meta에서 공식적으로 출범한 라이브러리가 아닌 점을 제외하면 전세계적으로 RN 개발자라면 반드시 필수록 사용하는 라이브러리 중 하나이다.
@react-navigation/native 는 React Navigation 라이브러리의 핵심 모듈이라고 보면 된다.
즉, 네비게이션을 사용하기 위한, 또는 네비게이터를 위한 foundation 이라고 보면 된다.

2) 설치

$ yarn add @react-navigation/native

이 포스트에서 언급했듯이, React Navigation은 단순히 이 자체 패키지만 있다고 하여 완성되는 것이 아니라 몇 가지 핵심 유틸리티로 구성되어 있다. (ex. 내부적인 애니메이션 또는 제스쳐 처리 등 일부 native 단 기능)

따라서 추가적인 dependencies 설치가 필요하다.

$ yarn add react-native-screens react-native-safe-area-context

• "react-native-screens"

  • iOS, Android 에서 네이티브 화면 컴포넌트를 사용하여 성능을 향상시키는 역할
  • 일부 네비게이션 동작은 RN의 기본 화면 컴포넌트보다 더 부드럽고 효율적으로 처리
  • 따라서 React Navigation의 성능을 최적화하기 위해 사용된다고 보면 된다.

• "react-native-safe-area-context"

  • React Navigation이 SafeArea 를 고려하여 레이아웃을 조정할 때 사용

Android에서 `"react-native-screens"` 를 제대로 동작시키기 위해 다음 과정을 수행한다.

path: android/app/src/main/java/<your package name>/MainActivity.java

// 추가
import android.os.Bundle;
...

public class MainActivity extends ReactActivity {
  // 추가
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
  // ...
}

3) NavigationContainer

NavigationContainer 는 네비게이션의 tree를 관리하고 navigation state를 관리하는 중요한 역할이다.
보통 index.js 혹은 App.tsx 와 같이 앱의 root에서 NavigationContainer 로 wrapping 하여 사용한다.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

---

2. Native Stack

1) 정의

React Navigation 라이브러리의 스택 네비게이션(Stack Navigation)을 제공하는 패키키 중 하나이다.

스택 네비게이션(Stack Navigation) ?
화면 간의 이동과 이전 화면으로의 이동을 '스택' 기반으로 네비게이션을 구현하는 것
즉, 화면을 '스택(Stack)' 형식으로 관리한다.
새로운 화면이 나타나면 스택에 push하여 스택을 쌓고, 뒤로 가기 버튼을 누르면 이전 화면으로 pop하여 스택을 제거한다.

navigation props로 route.params 를 자주 볼 수 있는데, 이 props가 바로 stack navigation에서 나온다.

🔔 참고) @react-navigation/stack 과 헷갈릴 수 있다.
이는 웹, iOS, Android 등 플랫폼에서 독립적으로 작동하는 패키지이며, @react-navigation/native-stack 은 RN 앱에서만 사용 가능한 스택 네비게이터이다.

2) 설치

$ yarn add @react-navigation/native-stack

역시 react-native-screens 의 추가적인 dependencies 설치가 필요하다.

3) createNativeStackNavigator

createNativeStackNavigator 는 Screen 과 Navigator 두 가지를 반환하는 Stack 함수이다.

• Screen
  • 스택 네비게이션에서 사용되는 각 화면을 정의한다.
  • name : 화면의 이름
  • component : 컴포넌트
• Navigator
  • 네비게이션 스택의 구조와 흐름을 정의한다.
  • 스택 네비게이션의 Root 네비게이터 를 나타낸다. 일반적으로 앱의 가장 상위 레벨에서 사용된다.
  • 반드시 하나 이상의 Screen 컴포넌트를 포함한다.
  • 여러 Screen 컴포넌트를 하나의 Navigator 안에 중첩하여 스택 내에서 화면 간의 이동을 관리할 수 있다.

아래는 간단한 예시 코드이다.

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

자세한 options 내용은 Native Stack Navigator 공식 문서 에서 확인 가능하다.

4) navigation props

navigation props는 어떠한 이벤트를 동작시키는 버튼을 클릭하여 새로운 화면으로 navigating을 시도 할 때 사용한다.
즉, 스택 네비게이터 내의 정의된 모든 화면 컴포넌트로 navigation props가 전달되어 이동할 수 있다.

아래는 간단한 사용 예제이다.

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

navigation 안에 navigate , push , goBack 등 여러 기능들이 존재한다.
자세한 사항은 여기서 확인하는 것이 좋다.

---

4. Bottom tabs

1) 정의

앱 하단에 탭을 두어 스크린 이동이 가능한 네비게이터이다.

2) 설치

$ yarn add @react-navigation/bottom-tabs

3) createBottomTabNavigator

createBottomTabNavigator 는 마찬가지로 Screen 과 Navigator 두 가지를 return 한다.
(설명은 Native Stack과 동일하므로 생략)

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Bottom = createBottomTabNavigator();

function MyTabs() {
  return (
    <Bottom.Navigator>
      <Bottom.Screen name="Home" component={HomeScreen} />
      <Bottom.Screen name="Settings" component={SettingsScreen} />
    </Bottom.Navigator>
  );
}

자세한 options 내용은 Bottom Tabs Navigator 공식 문서 에서 확인 가능하다.