[react-native] React Navigation

 react-native에서는 여러 화면으로 구성된 App을 만드려면 네비게이션 관련 서드파티 라이브러리를 사용해야 한다. 

 

일반적으로 가장 많이 사용되는 라이브러리가 react-navigation이라는 리액트 네이티브 커뮤니티에서 관리하는 라이브러리이다.

 

Docs: https://reactnavigation.org/docs/getting-started/

Getting started | React Navigation

 

Docs에 아주 친절하게 예제 코드와 함께 설명하고 있다. 

 

바로 한번 사용해보자.

---

설치

우선, 공식 홈페이지에서는 각 리액트 네이티브 버전별로 다른 설치 방법을 알려준다. 

(책에서 버전을 잘못 셋팅해준건지... 나는 리액트 네이티브 7.0 버전을 가지고 계속 7.x 대 버전 설치법으로 설치하여 사용하는데 라이브러리 설치만 하면 build가 fail나서 어제 한 3시간 정도를 갖다 버렸다...)

 

7.2x 버전 이후부터 설치 방식이 조금 달라진 거 같은데, 나는 리액트 네이티브 7.3 버전을 사용했다.

 

라이브러리를 아래와 같이 설치해주고,

yarn add @react-navigation/native@next

 

의존성 라이브러리인 react-native-safe-area-context 또한 설치를 해줘야 한다.

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

 

이 때, ios라면 npx pod-install ios을 반드시 진행해야 하고, android라면 조금 더 절차가 까다롭다.

 

먼저 프로젝트 내부에 있는 android 폴더로 이동하여 MainActivity.java를 열어준 뒤, 아래와 같이 수정한다.

 

◎MainActivity.java

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

 

이 때, intellij 를 사용한다면 해당 리액트 네이티브 프로젝트에 android 폴더 내부 파일에 대한 sdk가 제대로 적용되어 있지 않기 때문에 자동 import도 안하고, 컴파일 오류도 안띄우는 경우가 있다.

(이거 때문에 셋팅 시간이 +1 시간이었다...)

 

반드시 import 구문이 아래와 같이 추가되었는 지 확인하자.

import android.os.Bundle;

---

기본적인 사용 방식은 아래와 같이 App.js나 index.js에 메인 컴포넌트를 NavigationContainer로 감싸는 것이다.

 

◎App.js

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

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