5.2.1 네이티브 스택 내비게이터

리액트 내비게이션 라이브러리에는 다른 상황에 사용할 수 있는 다양한 내비게이터가 있습니다. 그 중 네이티브 스택 내비게이터(Native Stack Navigator)는 가장 흔히 사용되며 안드로이드에서는 Fragment를, iOS에서는 UINavigationController를 사용해 일반 네이티브 앱과 정확히 동일한 방식으로 화면을 관리합니다. 네이티브 스택 내비게이터를 사용하기 위해서는 라이브러리를 추가적으로 설치해주어야 합니다.

$ yarn add @react-navigation/native-stack

라이브러리를 설치한 다음에는 화면으로 사용할 컴포넌트 두 개를 만들어볼 텐데 화면 전용 컴포넌트는 screens라는 디렉터리를 만들어 그 안에 저장할 것입니다. 이렇게 screens라는 디렉터리에 컴포넌트를 분류해 저장하면 화면 전용 컴포넌트를 모아서 관리할 수 있기 때문에 편리합니다. 참고로 반드시 screens 디렉터리를 분류할 필요는 없습니다.

첫 번째로 만들 컴포넌트는 HomeScreen입니다.

screens/HomeScreen.js

import React from 'react';
import {View, Button} from 'react-native';

function HomeScreen({navigation}) {
  return (
    <View>
      <Button title="Detail 열기" />
    </View>
  );
}

export default HomeScreen;