탭

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

ESLint는 자바스크립트 코드를 작성할 때 개발자 취향에 따라 탭을 쓸지, 스페이스를 쓸지, 몇 칸을 쓸지를 일관성있게 관리해 주는 도구이다. 만약 ESLint에 설정된 규칙에 맞지 않는 코드가 작성되었을때 오류로 표기되고 Prettier라는 도구로 한번에 정리할 수 있다. 이 두 확장프로그램은 VS Code에서 설치할 수 있다. 위 이미지처럼 탭이나 띄어쓰기가 설정된 규칙과 일치하지 않을때 오류로 표기해준다. 이럴때 F1을 누르고 Format Document를 선택하면 기본 포맷터를 선택하라고 나오는데 ESLint를 선택하면 된다. 이 설정을 활성화하면 저장할 때마다 코드를 자동으로 정리된다.