React Native - 그림자 속성과 Platform

그림자

그림자는 OS(Platform)마다 설정 방법이 다르다.

플랫폼	속성
iOS	shadowColor, shadowOffset, shadowOpacity, shadowRadius
android	elevation

다른 플랫폼의 설정들은 무시된다.

 

각각 설정은 아래와 같다

shadowColor	색상	"color"
shadowOffset	넓이/높이	{width: number, height: number} object형식으로 작성해야 한다.
shadowOpacity	투명도	0과 1 사이의 수
shadowRadius	blur radius	숫자
elevation	shadow크기	0을 포함한 정수

shadowOffset은 넓이와 높이라고 되어있지만 shadow의 위치라고 생각하면 된다. 음수도 가능하다.

 

아래 예시들을 보면 더 쉽게 이해할 수 있다.

 

(출처: https://livebook.manning.com/book/react-native-in-action/chapter-5/38 )

 

아래 사이트에서도 shadow속성을 조절해볼 수 있다.

https://ethercreative.github.io/react-native-shadow-generator/

React Native Shadow Generator

 

 

Platform

각각 다른 플랫폼의 설정을 따로 작성할 수 있다.

Platform을 import해줘야 사용할 수 있다.

import { ..., Platform } from "react-native";

shadow라는 style을 만들어 iOS와 android의 적용되는 코드를 따로 작성한다.

const style = StyleSheet.create({
    shadow: {
        ...Platform.select({
            ios: { 
                shadowColor: '#ffffff',
               shadowOffset: { width: 10, height: 10, },
                shadowOpacity: 0.5,
               shadowRadius: 10,
            },
            android: { 
               elevation: 20,
            },
        })
    }
});

Platform은 Platform.OS로 확인할 수 있다.

<Text>{ Platform.OS === 'ios' ? 'ios' : 'android' }</Text>

위와 같이 작성하면 os에 맞는 text를 작성할 수 있다.

 

참고한 사이트

https://reactnative.dev/docs/shadow-props

Shadow Props · React Native

https://reactnative.dev/docs/view-style-props#elevation

View Style Props · React Native

https://blog.self-made.cloud/164

react-native, shadow에 대한 연구

https://ethercreative.github.io/react-native-shadow-generator/

React Native Shadow Generator

https://livebook.manning.com/book/react-native-in-action/chapter-5/38

Chapter 5: Styling in depth · React Native in Action