[Setting | ReactNative] 개발환경 구축하기 (3) - React Navigation 적용

앱에서 라우팅 및 네비게이션을 제공하기 위해서 React Navigation 적용방법을 정리한다.

---

> 작성일 : 2025-01-27
> OS : macOS Sequoia 15.2 (Apple M4)
> NodeJS : v22.13.1
> NPM : v10.9.2
> ReactNative : v0.77

---

기본앱 설치 후 진행 - Link Tailwind 적용 후 진행 - Link 메뉴얼 참고 - Link

---

<1> React Navigation 설치

생성된 프로젝트에서 아래 명령을 수행

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

---

<2> Android MainActivity 설정

프로젝트 android/app/src/main/java/<packagename>/MainActivity.kt 파일을 아래와 같이 수정

package com.mungpl_app

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate
/**
 * Set for React Navigation
 */
import android.os.Bundle

class MainActivity : ReactActivity() {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  override fun getMainComponentName(): String = "mungpl_app"

  /**
   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
   */
  override fun createReactActivityDelegate(): ReactActivityDelegate =
      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)

  /**
   * Set for React Navigation
   */
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
  }
}

---

<3> NavigationContainer

앱이 NavigationContainer로 감싸진 구성이어야 한다.

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

export default function App() {
  return (
    <NavigationContainer>React Navigation Test</NavigationContainer>
  );
}

---

<4> Stack & Native Stack & Bottom Tabs

네비게이션 구성에는 기본적으로 Stack Navigator, Native Stack Navigator, Bottom Tab Navigator 을 기반으로 구현된다.

• Stack Navigator - Link

npm install @react-navigation/stack
npm install react-native-gesture-handler

• Native Stack Navigator - Link

npm install @react-navigation/native-stack

• Bottom Tabs - Link

npm install @react-navigation/bottom-tabs

React Navigation GitHub에 다양한 예제를 제공한다. 개발하고자 하는 앱의 형태와 적합한 구성을 찾아 참고한다.

• React Navigation Example - Link

Tags : react native navigation적용, React Navigation, ReactNavigation 설정, RN React Navigation, Stack Navigator, Native Stack Navigator, Bottom Tabs Navigator