그림자 설정

추천사이트

• 그림자 설정값 시뮬레이션 : https://ethercreative.github.io/react-native-shadow-generator/
값에 따른 그림자 정도를 실시간으로 확인할 수 있다.

그림자 설정

import { Platform, StyleSheet } from 'react-native';

...

const styles = StyleSheet.create({
	shadow:{
		...Platform.select({
			ios:{
				shadowColor: "#000",
				shadowOffset:{
					height: -0.3,
					width: 1,
				},
				shadowOpacith:0.3,
				shadowRadius: 7,
			},
			android:{
				elevation: 2,
			}
		})
	}
})

ios

• shadowColor : 그림자 색상

• shadowOffset : 그림자 위치

• shadowOpacity : 그림자 투명도

• shadowRadius : 그림자 둥글게

android

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

• elevation : 숫자 값, 숫자가 커질수록 그림자 짙음.