내비게이션

useNavigation Screen으로 사용 중인 컴포넌트에서는 Props를 통해 navigation 또는 route 객체를 사용할 수 있지만, Screen으로 사용되지 않는 다른 컴포넌트에서는 navigation 또는 route를 Props로 받아와서 사용할 수 없다. 예를 들어 HomeScreen에서 상세보기 버튼을 DetailViewButton 이라는 컴포넌트로 따로 분리해서 사용하고 싶다면 다음 세 가지 방법을 통해 구현할 수 있다. 1. SendMessageButton 컴포넌트에 onPress 함수를 전달 function DetailViewButton({onPress}) { return ; } function HomeScreen({navigation}) { return ( Home naviga..

머티리얼 하단 탭 내비게이터(Material Bottom Tab Navigator) 설정 및 사용법 머티리얼 하단 탭 내비게이터(Material Bottom Tab Navigator)은 이 전 글에 소개한 머터리얼 상단 탭 내비게이터와 비슷한 내비게이터인데, 큰 차이점은 이 내비게이터는 하단에만 나타나며, 활성화된 탭에 따라 전체 탭의 배경색을 변경할 수 있다. 머티리얼 하단 탭 내비게이터를 사용하기 위해 아래 명령어를 통해 라이브러리를 설치해야한다. $ yarn add @react-navigation/material-bottom-tabs react-native-paper $ cd ios $ pod install $ cd .. $ yarn ios $ yarn android react-native-pape..

머티리얼 상단 탭 내비게이터(Material Top Tab Navigator) 설정 및 사용법 머티리얼 상단 탭 내비게이터(Material Top Tab Navigator)는 하단 탭 내비게이터와 유사하다. 이 내비게이터는 탭을 상단에 위치시킬 수 있고, 탭을 누르면 구글의 머터리얼 디자인 특유의 물결(ripple) 효과가 나타난다. 화면을 스와이프하는 형태로 우측/좌측 탭으로 전환할 수도 있다. 머티리얼 상단 탭 내이게이터를 사용하려면 아래 명령어를 통해 라이브러리를 설치해야 한다. $ yarn add @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view $ cd ios $ pod install $ cd .. ..

하단 탭 내비게이터(Bottom Tab Navigator) 설정 및 사용법 하단 탭 내비게이터(Bottom Tab Navigator)는 이름 그대로 하단에 탭을 보여주는 내비게이터다. 트워터, 유튜브, 인스타 등 많은 앱에서 하단 탭을 사용하고 있다. 하단 탭 내비게이터를 사용하기 위해선 아래 명령어를 사용해 라이브러리를 추가해야 한다. $ yarn add @react-navigation/bottom-tabs $ cd ios $ pod install $ cd .. $ yarn ios $ yarn android 사용 예제 코드 import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import {crea..

드로어 내비게이터(Drawer Navigator) 설정 및 사용법 드로어 내비게이터(Drawer Navigator)는 촤측 또는 우측 사이드바를 만들고 싶을 때 사용하는 내비게이터다. 사이드바를 모바일 앱에서는 드로어(Drawer)라고 부른다. 내비게이터를 사용하려면 아래와 같은 명령어를 통해 라이브러리를 설치해야 한다. $ yarn add @react-navigation/drawer react-native-gesture-handler react-native-reanimated $ cd ios $ pod install $ cd .. $ yarn ios $ yarn android react-native-gesture-handler : 드로어 내비게이터에서 사용자 제스처를 인식하기 위해서 내부적으로 사용하는..