3장 요점 정리

3장

 

색상 코드를 정할 때는 Material Color(https://material.io/resources/color)를 주로 참조

색마다 코드가 뭔지 보기 쉽게 되어 있음.

 

 

 

현재 시간을 가져올 때는 Java Script의 Date 객체를 사용

Date의 기본 사용법 및 내장된 메서드를 확인 => ( http://bit.ly/mdn-date )

 

 

 

시뮬레이터를 가동할 때 새로운 터미널 창으로 뜨는 것 = Metro Bundler

 

 

 

시뮬레이터에서 개발자 메뉴를 띄우는 방법

iOS에서는 윈도우 + D, 안드로이드에서는 윈도우  + M

윈도우와 리눅스에서는 Ctrl + M

 

 

 

시뮬레이터에서 개발자 메뉴를 띄우는 방법

크롬 브라우저 기준 맥OS에서는 윈도우 + 사람 얼굴 모양 같은거  +  I

윈도우에서는 Ctrl + Shift +  I

 

 

 

템플릿 리터럴(Template Literal) 문법

jquery에서 사용하는 문법 같은데 첫번째 구문을 두번째처럼 변형해도 똑같다.

const formatted = year + '년 ' + month + '월 ' + day + '일';

const formatted = `${year}년 ${month}월 ${day}일`

 

 

 

StatusBar

아래의 영역에서 제일 맨 위의 회색부분을 말한다.

IOS와 안드로이드의 설정 방법이 다르다.

 

 

 

StatusBar 내용 색상 변경

아래처럼 StatusBar에 barStyle Props를 light-content로 설정하면 된다.

 

 

 

특정 부분의 여백만 비활성화하고 싶다면 react-native-safe-area-context라는 서드 파티 라이브러리를 사용함.

원하는 디렉토리에서 터미널을 열고

yarn add react-native-safe-area-context

를 치면 자동으로 설치가 된다.

그 후 안드로이드를 다시 실행하면 연동 설치가 자동으로 실행 된다. (IOS는 수동설치가 필요함)

 

 

 

barStyle 값은

• dark-content(어두운 내용)
• light-content(밝은 내용)
• default(시스템 기본 설정)

<StatusBar backgroundColor="#26a69a" barStyle="light-content" />

 

 

 

리액트 네이티브에서 스타일링할 때 크기는 모두 dp로 설정

dp(density-independent pixel)란 1인치당 픽셀 밀도에 따라 크기가 일관된 UI를 보여줄 수 있는 단위

ppi(pixel per inch)란 1inch에 몇 px이 들어갈 수 있는지를 의미하는 밀도 단위

px = dp * ppi / 160

 

 

 

시뮬레이터에서 디바이스 변경

안드로이드의 경우 Android Virtual Device Manager를 열어

Create Virtual Device 버튼을 눌러 새 디바이스를 추가하면 됩니다.

 

 

 

Image 컴포넌트에서 사용할 경로를 지정할 때는 source라는 Props로 지정

경로를 입력할 때는 require()라는 함수로 입력

외부 이미지를 설정할 때는 다음과 같이 객체에 uri 값을 설정해 source Props로 설정

source={{uri: 'https://via.placeholder.com/150'}

 

중괄호가 두번 있는 이유는 url이라는 객체라는 의미의 중괄호 하나, 속성이라는 뜻의 중괄호 하나이기 때문

 

 

 

resizeMode 설정

• cover: 기본값. 이 옵션은 이미지의 가로 세로 비율을 유지한 상태로 이미지를 리사이징.
  이미지와 뷰의 가로 세로 비율이 일치하지 않을 경우 이미지의 일부분이 잘림.
• contain: 이미지의 가로 세로 비율을 유지한 상태로 이미지의 모든 영역이 뷰 안에 보이게 리사이징.
• stretch: 뷰의 크기대로 이미지를 리사이징. 이 과정에서 이미지의 가로 세로 비율이 원본과 달라질 수 있음.
• repeat: 뷰의 크기가 이미지의 크기보다 크면 바둑판식으로 이미지를 반복.
• center: 이미지를 뷰 중앙에 둠. contain과 마찬가지로 이미지의 모든 영역이 뷰 안에 보이게 하지만
  뷰가 이미지보다 크면 이미지의 크기가 커지지 않고 원본 사이즈를 유지.

 

 

 

키보드 입력을 받아낼 때는 아래처럼 TextInput이라는 컴포넌트를 사용

placeholder는 컴포넌트에 아무것도 입력하지 않았을 때 보여줄 기본 텍스트

<TextInput placeholder="할일을 입력하세요." style={styles.input} />

 

 

 

 

input의 padding은 터치 영역을 늘리기 위해서 설정한다.

 

 

 

텍스트를 입력할 때 키보드가 화면을 가리지 않게 하려면 KeyboardAvoidingView를 사용

안드로이드에서는 아무것도 설정하지 않는 것이 잘 작동 / iOS에서는 값을 설정해줘야 제대로 작동

 

 

 

 

운영 체제에 따라 삼항연산자보다는 Platform.select라는 함수를 사용하면 더 깔끔

behavior={Platform.select({ios: 'padding', android: undefined})}

 

 

 

버튼을 눌렀을 때 효과를 주는 방법

• TouchableHighlight: 터치했을 때 배경색을 변경.
• TouchableNativeFeedback: 터치했을 때 안드로이드에서 물결 효과를 보여줌.
  안드로이드에서만 사용 가능하며, iOS에서 사용 시 오류 발생.
• TouchableOpacity: 터치했을 때 투명도를 조정.
• TouchableWithoutFeedback: 터치했을 때 아무 효과도 적용하지 않음.

 

 

특정 요소를 삐져나오는 무언가가 있다면 View 컴포넌트로 감싸고 style에서

overflow 값을 hidden으로 하면 지정한 영역 외 바깥 영역이 화면에 나타나지 않음.

 

 

 

onPress 함수에서 Keyboard.dismiss();는 현재 나타난 키보드를 닫는다.

onSubmitEditing은 Enter를 눌렀을 때 호출되는 함수

returnKeyType은 Enter의 타입을 지정, 타입에 따라 Enter 부분에 보이는 설명 또는 아이콘이 바뀜.

 

 

 

returnKeyType Props 종류

• 플랫폼 공통 - done (완료) - go (이동) - next (다음) - search (검색) - send (보내기)
• iOS 전용 - default (기본) - emergency-call (긴급 통화) - google (검색) - join (가입) - route (이동) - yahoo (검색)
• 안드로이드 전용 - none (일반 Enter) - previous (뒤로)