navigation

머티리얼 하단 탭 내비게이터(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..

하단 탭 내비게이터(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 : 드로어 내비게이터에서 사용자 제스처를 인식하기 위해서 내부적으로 사용하는..

헤더 타이틀 커스터마이징 react-navigation에서는 타이틀 영역을 헤더(Header)라고 부른다. 헤더 부분의 타이틀을 커스터마이징할 땐 두 가지 방법이 있는데, 첫 번째 방법은 Stack.Screen의 options 속성으로 설정하는 것이다. 두 번째 방법은 화면 컴포넌트에서 navigation.setOptions 함수를 사용하는 것이다. 아래 예제는 useEffect Hook 함수를 사용하였다. function HomeScreen({navigation}) { useEffect(() => { navigation.setOptions({title: '홈'}); }, [navigation]); return ( ... ); } 만약 컴포넌트에 라우트 파라미터값을 넣어야 한다면 아래와 같이 함수로 설정..

React Navigation 설치 및 사용법 React Navigation이란? 모바일 애플리케이션은 보통 여러 화면으로 구성되어 있는데 이러한 애플리케이션을 만들려면 내비게이션 관련 서드 파티 라이브러리를 사용해야 한다. 내비게이션과 관련해 devbksheen.tistory.com 이전 블로그 글에서는 React Navigtion을 소개하고 설치 후 사용해보았다. 이번 글에는 React Navigation을 더욱 활용하는 법을 알아보자. 라우트 파라미터 새로운 화면을 보며줄 때 의존해야 하는 어떤 값이 있으면 라우트 파라미터를 설정해야 한다. 예를 들어 회원 고유번호가 1인 데이터를 보여주는 화면이 있을때 {"id": 1}과 같은 방식으로 파라미터를 설정한다. 라우트 파라미터를 설정해 화면을 전환할 ..

React Navigation이란? 모바일 애플리케이션은 보통 여러 화면으로 구성되어 있는데 이러한 애플리케이션을 만들려면 내비게이션 관련 서드 파티 라이브러리를 사용해야 한다. 내비게이션과 관련해 사용할 수 있는 라이브러리가 두 개 있다. react-navigation 리액트 네이티브 커뮤니티에서 관리하며, 리액트 공식 메뉴얼에서도 이 라이브러리로 화면을 전환하는 방법을 소개할 정도로 사용률이 가장 높은 라이브러리다. 이 라이브러리는 내비게이션 기능이 자바스크립트로 구현되어 있다. react-native-navigation 홈페이지 제작 서비스 Wix에서 관리한다. 이 라이브러리는 이미 만들어진 네이티브 앱에 리액트 네이티브를 적용하는 경우 사용하기에 더 적합하며, 내비게이션 기능이 자바스크립트가 아닌..