profile

코드잇

2023. 5. 3
리액트 네이티브 네비게이션 시작하기

#React Native Navigation 시작하기

React Native Navigation은 React Native 개발자들이 모바일 응용 프로그램의 상호 작용성과 기기 간의 일관성을 개선하기 위해 개발된 오픈 소스 네비게이션 라이브러리입니다. 이 라이브러리를 사용하면 React Native 개발자들이 네비게이션 스택과 라우트, 탭 내비게이션 등의 기능을 빠르고 손쉽게 적용할 수 있습니다.

React Native Navigation 사용하기

React Native Navigation의 사용은 간단합니다. 먼저 NPM이나 Yarn을 사용하여 React Native Navigation을 설치합니다. 그 다음 앱 프로젝트의 root 컴포넌트에서 React-Native-Navigation을 사용하기 위한 기본 설정을 합니다. 그런 다음 라우트 및 탭 내비게이션 등의 컴포넌트를 정의하고 이를 앱의 메인 스크린에서 표시합니다.

예시

예를 들어, App.js의 root 컴포넌트에서 React-Native-Navigation을 사용하기 위한 기본 설정을 다음과 같이 할 수 있습니다.

import { Navigation } from 'react-native-navigation';

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'Home',
            },
          },
        ],
      },
    },
  });
});

또한 라우트를 정의할 때는 다음과 같이 할 수 있습니다.

Navigation.registerComponent('Home', () => Home);
Navigation.registerComponent('Details', () => Details);
Navigation.registerComponent('Settings', () => Settings);

##결론

React Native Navigation은 React Native 개발자들이 모바일 응용 프로그램의 상호 작용성과 기기 간의 일관성을 개선하기 위해 개발된 오픈 소스 라이브러리로, 빠르고 손쉽게 네비게이션 스택과 라우트, 탭 내비게이션 등의 기능을 적용할 수 있습니다. React Native Navigation을 사용하려면 NPM 또는 Yarn을 사용하여 설치하고, 앱 프로젝트의 root 컴포넌트에서 기본 설정을 한 다음 라우트 및 탭 내비게이션 등의 컴포넌트를 정의하고 이를 앱의 메인 스크린에서 표시해야 합니다.

이 튜토리얼은 어땠나요?

(주) 코드잇

대표KANG YOUNG HOON, 이윤수

개인정보보호책임자강영훈

사업자 번호313-86-00797

통신판매업제 2019-서울중구-1034 호

주소서울특별시 중구 청계천로 100 시그니쳐타워 동관 10층 코드잇