Navigation

기본적으로 @react-navigation/native와 함께 Stack Navigator 패키지를 설치한다.
프로젝트 폴더내에서  네비게이션 관련 모듈을 설치 한다.

npx expo install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npx expo install @react-navigation/native-stack

다음은 코파일럿에서 생성한 간단한 네비게이션 예제이다.
App.js에서 Stack Navigator를 설정하는 기본 구조는 다음과 같다.

App.js 파일
import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>홈 화면</Text>
      <Button
        title="상세 화면으로 이동"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>상세 화면</Text>
      <Button
        title="홈으로 돌아가기"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: '홈' }} />
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title: '상세' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

계층 구조는 다음과 같다.
NavigationContainer는 책장이고 Stack.Screen은 책과 비슷하다.
Stack.Navigator는 책을 어떻게 배치할지 타입이라고 생각하면 된다.

NavigationContainer
         Stack.Navigator
               Stack.Screen


다음 임포트는 React 뿐만 아니라 모든 리액트 함수를 임포트 한다.
import * as React from 'react';

1. NavigationContainer를 임포트 한다.


import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

2. NavigationContainer:

앱의 루트에 배치하여 네비게이션 상태를 관리하고 최상위 네비게이터(예: Stack, Tab, Drawer)를 앱 환경과 연결해주는 역할을 한다.

3. Stack.Navigator:

화면을 순차적으로 쌓고 제거하는 네비게이션 방식으로, 모바일 앱의 기본적인 화면 이동 패턴을 구현한다.
  • initialRouteName으로 첫 화면을 지정할 수 있다.

4. Stack.Screen:

React Navigation의 Stack Navigator 안에서 개별 화면을 정의하는 컴포넌트입니다.
각 Screen은 이름(name)과 연결된 컴포넌트(component)를 지정하여 하나의 화면을 나타낸다.

NavigationContainer는 자식 컴포넌트에 navigation, route 두가지 기본 props를 자동으로 넘겨준다.

function HomeScreen({ navigation }) {
function DetailsScreen({ navigation }) {
  • navigation: 화면 전환을 위한 객체
  • route: 현재 화면에 전달된 파라미터와 관련된 정보
navigation은 React Navigation이 자동으로 주입하는 props이다.
따라서 HomeScreen({ navigation })처럼 구조 분해 할당으로 꺼내 쓸 수 있다.
navigation 객체에는 화면 전환 관련 메서드들이 있다.
  • navigation.navigate('ScreenName') → 다른 화면으로 이동
         onPress={() => navigation.navigate('Details')}
  • navigation.goBack() → 이전 화면으로 돌아가기
         onPress={() => navigation.goBack()}
  • navigation.push('ScreenName') → 같은 화면을 새로 쌓기
  • navigation.replace('ScreenName') → 현재 화면을 교체하기