DINGA DINGA
article thumbnail
[React Native] 리액트 내비게이션 - 기본적인 사용법
REACT NATIVE/Study 2022. 8. 3. 21:56

리액트 네이티브 앱에서는 화면을 전환할 때 브라우저의 히스토리 기능과 비슷한 사용성을 제공하기 위해 Native Stack Navigator라는 것을 사용한다. 스택 구조를 사용하기 때문에 뒤로 가기, 앞으로 가기 등의 기능을 구현할 수 있는 것이다. 리액트 내비게이션 라이브러리에는 다양한 내비게이터가 있다. 그 중 Native Stack Navigator는 가장 흔히 사용된다. 네이티브 스택 내비게이터를 사용하기 위해서는 라이브러리를 추가로 설치해야 한다. 1. 라이브러리 설치 yarn add @react-navigation/native-stack 2. screens 폴더 만들고 그 안에 첫번째 컴포넌트 만들기 // screens/LoginScreen.js import React from 'react'..

article thumbnail
[React Native] 리액트 내비게이션 - 설치 및 적용
REACT NATIVE/Study 2022. 8. 3. 21:24

의존 패키지 설치하기 1. 터미널에서 프로젝트 폴더로 이동 2. 다음 명령어를 실행하여 모듈 설치 yarn add @react-navigation/native 오류 안 뜨고 Done 뜨면 성공. 3. 다음 명령어를 실행하여 의존 라이브러리 설치 yarn add react-native-screens react-native-safe-area-context react-navigation이 의존하는 라이브러리가 몇 가지 있다고 하니 설치한다. 마찬가지로 오류 안 뜨고 Done 뜨면 성공. 4. ios 디렉터리에서 Pod 설치 (Mac의 경우) cd ios pod install 맥 환경이 아니면 생략해도 된다. 이렇게 하면 설치가 완료된다. 라이브러리 적용하기 1. App.js에 다음 코드 추가 import { ..

728x90