[React Native] 플랫폼 별로 요소에 그림자 효과 넣기 (Android, iOS, Web)

플랫폼 별로 요소에 그림자 효과 넣기 (Android, iOS, Web)

들어가며

• 리액트 네이티브(React Native)에서 플랫폼 별(Android, iOS, Web)로 요소에 그림자 효과를 넣는 방법을 간단하게 정리해본다.

 

 

방법

① Android

• Android에서는 @elevation@ 속성을 사용해서 요소에 그림자 효과를 넣어줄 수 있다.

style={{
  elevation: 5,             // 숫자가 클수록 그림자가 진해진다.
  backgroundColor: 'white', // 배경색 있어야 그림자가 보이므로 넣어준다.
  borderRadius: 10,
}}

 

② iOS

• iOS는 @elevation@ 속성이 인식되지 않는다.
• 따라서 다음과 같은 4가지 속성을 사용하여 요소에 그림자 효과를 넣어줄 수 있다.

속성	설명
@shadowColor@	그림자 색상
@shadowOffset@	그림자 위치 (가로(@width@), 세로(@height@))
@shadowOpacity@	그림자 투명도 (@0@ ~ @1@)
@shadowRadius@	그림자 퍼짐 정도

 

style={{
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  backgroundColor: 'white',
  borderRadius: 10,
}}

 

③ Web

• Web은 iOS 처럼 @shadow@ 관련 속성을 직접 쓰는 대신, CSS의 @box-shadow@ 스타일을 흉내내서 요소에 그림자 효과를 넣어줄 수 있다.
• 하지만, 기본 React Native 스타일만으로는 제한적이므로 스타일 프레임워크나 커스텀 처리가 필요할 수 있다.

style={{
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 1 },
  shadowOpacity: 0.2,
  shadowRadius: 1.41,
  elevation: 2,
  backgroundColor: 'white',
}}

 

웹에서도 위 속성들이 일부 적용되긴 하지만 완전히 동일한 결과는 보장되지 않는다.

 

플랫폼 별 스타일 분리하기

• 다음과 같이 @Platform@을 이용하여 플랫폼 별 스타일은 분리시켜 줄 수 있다.

import { Platform } from 'react-native';

const shadowStyle = {
  ...Platform.select({
    ios: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
    },
    android: {
      elevation: 5,
    },
    default: {}, // 웹 등 다른 플랫폼
  }),
  backgroundColor: 'white',
  borderRadius: 10,
};

 

요소에 그림자 효과가 적용된 모습

 

정리

플랫폼	속성
Android	@elevation@
iOS	@shadowColor@, @shadowOffset@, @shadowOpacity@, @shadowRadius@
Web	위 속성의 일부분 제한적으로 적용 가능

 

참고 사이트

View Style Props · React Native

Shadow Props · React Native