JinyJiny'-'

1. 반응형 디자인의 필요성 앱의 특성상, 앱을 사용하는 기기의 디스플레이 크기가 천차만별이니 component 등의 사이즈를 해당 크기에 맞게 정해줄 필요가 있다. 본인은 디자이너와의 협업을 위해 figma를 사용하는데, figma의 inspect 탭에서 다음과 같이 pixel 사이즈로 알려준다. (고정크기라 디스플레이화면 고려 X) 또, 퍼센트 단위는 styled-component에서 사용 불가하다. 2. React Native의 Dimensions import { Dimensions } from "react-native"; const WINDOW_WIDHT = Dimensions.get("window").width; // Dimensions.get("screen").width; const WINDO..

1. 이번 포스팅의 목적 Bottom-Tab Navigator가 메인화면에 있고, 어떤 Tab을 누르면(또는 어떤 Component를 누르면) 하단 탭 없이 화면을 전체 다 덮게 뜨게 하고 싶을 수 있다. (예를 들어보자면, 쿠팡앱에서 하단 탭에 "검색"을 누를 때, 메인에서 상품 하나를 눌렀을 때 등) 이때, navigation을 어떤 식으로 구성하면 되는지 알아보자. 예제는 styled-component, 반응형디자인([React Native] 10. 반응형 디자인 적용하기) 을 사용했습니다. 2. Bottom Tab Navigator 구성 Bottom Tab Navigator는 이전 포스팅_[React-Native] 8. Bottom Tab Navigator 사용하기_의 예제를 사용한다. 이전 포스..

이전 포스팅 [React-Native] 4. react-navigation V5 설정하기 에서 react-navigation을 설치하고, Material Bottom Tab Navigator의 간단한 예제를 실행해보았다. 이번 포스팅에선 Bottom Tab Navigator을 사용해보자! (공식 문서는 여기) 예제는 styled-component, 반응형디자인([React Native] 10. 반응형 디자인 적용하기) 을 사용했습니다. 1. Bottom Tab Navigator를 import 해준다. import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; 2. Bottom Tab 생성 및 커스텀 const Tab = create..

보통 앱들을 보면 기본 상태바를 사용하는게 드물다( 그만큼 못생겼다😂 ) 그래서 프로젝트 기본 셋팅단계에서 상태바도 만져주었다. React-Native에선 기본으로 StatusBar에 대한 기능을 제공해준다. 공식 사이트 : reactnative.dev/docs/statusbar StatusBar · React Native Component to control the app status bar. reactnative.dev 1. StatusBar 사용 우선 필요한 라이브러리 import를 해주자. import {StatusBar} from "react-native"; 이제, 아래와 같이 사용해서 상태바를 조작해줄 수 있다. (구글링했을 땐 이것처럼 안 나오던데 아마 Typescript를 사용하고 있어서 ..