[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