고급 Style

 

요번 포스팅에서는 크게 플렛폼 별 스타일링과 flexbox에 대해서 알아봅니다. 

 

일단 안드로이드와 iOS의 화면 단위(포인트, DP)자체가 달라 CSS코드에 스타일 속성 적용 시 특정 단위를 넣지 않습니다.(px,dp)

 

그 이유는 아래와 같으나  React native에서 알아서 조절해 주고 있으니 굳이 이해할 필요는 없습니다. 

(맥북을 사려는 여자친구에게 레티나 디스플레이로 아는 척 오지게 할 때 유용합니다.)

 

픽셀

- 가장 작은 프로그래밍 화면 단위

- 해상도는 가로 X 세로 픽셀 수를 말함

- PPI : 인치당 픽셀 수(초기 아이폰 163PPI)

-> 같은 해상도의 다른 화면 크기라면 이미지의 선명도가 다르게 나옴

 

애플의 레티나 디스플레이는 기존 화면의 4배의 해상도를 가지므로 이론적으론 기존 이미지의 크기가 레티나에서는 4분의1 크기로 보이게 됩니다.(이미지의 크기는 이미 특정 픽셀로 고정이 되어 있으므로) 애플은 여기서 point라는 논리적인 개념을 도입해서 일반 디스플레이와 레티나 디스플레이에서 이미지를 봤을때 차이가 없도록 합니다.

* 반면 안드로이드는 DP라는 디바이스 독립적인 논리 개념을 도입(160PPI)하고 있습니다. 

 

결국 디스플레이 스펙 별, 플렛폼 별 눈에 보이는 요소의 크기를 일관성 있게 유지 해주기 위해 X2, X3의 논리적인 배수를 적용한다는 의미? 입니다. 

 

앞서 텍스트에 그림자 속성을 넣었듯이 View에 그림자 속성을 넣어 보겠습니다. 그림자가 대표적인 플렛폼 별 설정을 달리해야 하는 속성입니다.

iOS : shadowPropTypesIOS (shadowOffset, shadowOpacity, shadowRadius 같이 세부 속성으로 설정)

Android : elevation (겹쳐진 레이어의 우선 순위를 설정 그림자 레이어를 뒤에 실물 레이어를 앞에 두는 방식)

 

- Platform을 import

- ...Platform.select({ ios: {...}, android:{...} }) 를 통해 플렛폼 별 스타일 적용 코드를 추가

* 디버거를 붙인 상태에서 platform 유틸리티를 쓰려고 했더니 제대로 작동하지 않는 것 같았습니다. 잠시 디버거(크롬 개발자도구)를 끕니다. (백그라운드 디버거로 인한 작동 성능이 저조 할 수 있다는 경고 메세지가 emulator에 뜹니다.)

 

 

 

 

 

 

 

 

 

프로필 이미지, 카드 전체 아래에 그림자 효과가 적용된 것을 볼 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

반면 안드로이드에서는... 희미하게 적용된 그림자를 볼 수 있습니다.

 

 

 

 

 

 

 

 

 

Component 변형

component의 좌표 변경등을 통해 애니메이션 효과를 주기위한 속성들로 transform으로 시작하여 속성을 적용 가능합니다.

(e.g. transform: [{rotate: '90deg', scale: .5}])

*아래 다양한 변형 속성들을 배열 형태로 여러개 사용할 수 있으나 그 적용 순서에 따라 전혀 다른 결과가 만들어 질 수 있습니다.

- perspective : z-index를 조절하는 방식으로 3D 효과를 줄 수 있음

- translateX,Y : 요소의 평면 이동 아래, 우측이 + 수치임

- rotateX, Y, Z : 요소의 축회전 X(위아래), Y(좌우), Z(회전)

- backfaceVisibility : 요소가 회전했을때 반대면을 보여줄 것인가?에 대한 속성

- scale, X,Y : 요소의 크기를 조절, 기본 수치는 1

- skewX, Y: 요소를 변형하면서 기울임.. 직접 해보심이.. (안드로이드에서는 정상동작하지 않는다 함)

 

*ㅎㅎ.. 요소를 직접 다루는 대신 Yoga라는 layout engine을 쓴다고 합니다.

 

flexbox (View에 적용되는 기본적인 스타일 속성)

* 아래 공식 사이트에서 flexbox 속성의 예제 코드와 결과 이미지를 확인 할 수 있습니다. 

https://facebook.github.io/react-native/docs/flexbox#__docusaurus

 

- flex : 안드로이드의 weight와 비슷한 속성으로 부모 요소 대비 얼마의 비율로 요소의 크기(다른 요소 대비)를 확보할 것인가 결정

- flexDirection : 'row'를 주면 요소들의 배치 방향을 가로로 전환한다. (기본 main axis는 세로(column) 방향)

- justifyContext : 여러 자식 요소들의 자신의 크기대로 적절한 위치로 배치 하는 방식(center, flex-start,end, space-around, space-between)

- alignItems : 부모 요소의 보조 축을 따라 자식 요소들을 어떻게 정렬할 것인지 결정(center, flex-start, end)

- alignSelf : 자식 요소 자신의 독립적인 alignItems 속성을 지정

- flexWrap : 'nowrap' 화면을 넘어가면 잘림, 'wrap' 잘리지 않고 다음줄에 표현, 적용 예는 아래 링크를 통해 확인해보자

(https://yogalayout.com/docs/flex-wrap/)

 

변형실습 (npm install immutability-helper --save 를 통해 component state update를 위한 helper 설치)

github/highstyle 참고