[React Native] 호환 가능한 사용자 인터페이스 구축

maxWidth나 minWidth, maxHeight나 minHeight를 사용해 크기에 따라 너비와 높이가 반응하도록 설정 가능

maxWidth를 80%로 설정했다면 최대 80%라는 뜻으로 기기에 따라 차지하는 공간이 달라진다

퍼센트 값은 해당 요소를 가진 부모 컨테이너에 대한 퍼센트를 의미한다

 

Dimensions API

react-native에 내장된 API로 JSX 코드에서 사용하는 컴포넌트가 아니라 JavaScript 객체라서 styles를 포함한 코드 어디에서나 정보 추출을 위해 사용 가능하다

 

Dimensions에서 get 메서드를 호출하면 get 메서드가 문자열 타입 인수로서 화면이나 윈도우의 치수를 지니는데

iOS는 두 개념이 동일

안드로이드에서 화면은 상태 표시줄을 포함한 너비와 높이, 윈도우는 상태 표시줄 제외한 너비와 높이

get 메서드로부터 받는 객체에서 여러 프로퍼티에 접근 가능

ex) fontScale, width, height 등

Dimensions API를 알고 있다면 최대 사용 가능한 공간을 파악하고 그에 따라 설정을 조정하기 쉽다

const deviceWidth = Dimensions.get("window").width;

const styles = StyleSheet.create({
  container: {
    padding: deviceWidth < 380 ? 12 : 24,
    margin: deviceWidth < 380 ? 12 : 24,

 

화면 세로 고정

"orientation": "portrait",

 

방향 고정하지 않고 잠금 해제

"orientation": "default",

 

컴포넌트 함수 외부의 코드는 재실행되지 않는다

앱 사용 중 방향 전환을 가능하게 하고 싶다면 Dimensions API를 사용하지 않는 게 나을 수 있다

→ 반응형 코드 작성

기기의 방향이나 크기가 변경될 때 반응해야 하는 코드는 모두 컴포넌트 함수로 가야 한다

 

useWindowDimensions 훅은 호출만 하면 객체를 반환할 수 있고 객체 구조 분해를 통해 기기의 너비와 높이를 얻을 수 있다

const { width, height } = useWindowDimensions();

const marginTopDistance = height < 380 ? 30 : 100;

...
<View style={[styles.rootContainer, { marginTop: marginTopDistance }]}>

너비와 높이를 얻지만 내부적으로 이 훅은 기기의 치수를 살핀다

기기가 회전하는 등의 변경 사항이 발생할 때마다 이 컴포넌트 함수가 재실행되고 폭과 길이가 업데이트된다

 

KeyboardAvoidingView 컴포넌트는 JSX코드에서 다른 콘텐츠 또는 입력란을 포함하는 다른 콘텐츠를 감싸는 데 사용할 수 있는 컴포넌트

키보드가 열릴 때마다 입력 요소 및 다른 요소가 화면 위로 올라가 키보드가 열려도 액세스 할 수 있다

behavior를 추가해 height, padding, position을 값으로 가질 수 있다

KeyboardAvoidingView를 ScrollView로 감싸면 화면이 정상적으로 보이고 타이핑 시작하면 입력란이 위로 움직인다

 

Platform API는 실행 중인 플랫폼을 감지한다

borderWidth: Platform.OS === "android" ? 2 : 0,

위처럼 할 수도 있고 내장된 select 메서드를 사용할 수도 있다

select는 매개변수 값으로 객체를 필요로 하는데 이 객체에 ios 프로퍼티와 android 프로퍼티를 지정해 줘야 한다

borderWidth: Platform.select({ ios: 0, android: 2 })

 

플랫폼별 컴포넌트 파일이나 코드 파일 작성도 가능

Title.android.js

Title.ios.js

import문에서는 확장자를 포함하면 안된다!!

플랫폼별로 서로 다른 컴포넌트, 스타일, 색상, 코드 등을 정의할 수 있다

 

상태 표시줄 컴포넌트는 Expo로 활용하는 컴포넌트로 상태 표시줄의 모양 제어 가능

일반적으로는 App.js 파일에 넣지만 다른 파일도 가능

import { StatusBar } from 'expo-status-bar';

<StatusBar style="light" /> // 흰색 상태 표시줄
<StatusBar style="dark" /> // 어두운 상태 표시줄