[react-native] (style) 그림자 만들기

이 글은 <"처음 배우는 리액트 네이티브" (김범준, 한빛미디어)>를 읽고 이해한 바를 바탕으로 작성된 내용입니다.

http://bit.ly/my-first-react-native

GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다.

 

 

그림자는 리액트 네이티브에서 플랫폼(android, iOS, ...)마다 다르게 적용되는 스타일 속성이다.

 

1. iOS

iOS에 적용할 수 있는 그림자 속성으로는

• shadowColor
  : 그림자 색 설정
• shadowOffset
  : width와 height를 지정하여 그림자의 거리 설정
• shadowOpacity
  : 그림자의 불투명도 설정 (0 ~ 1.0)
• shadowRadius
  : 그림자의 흐림 반경 설정 

 

2. android

android에서는 elevation이라는 속성으로 그림자를 적용할 수 있다.

 

import React from "react";
import { StyleSheet, View, Platform } from "react-native";

export default () => {
  return <View style={styles.shadow}></View>;
};

const styles = StyleSheet.create({
  shadow: {
    backgroundColor: "#fff",
    width: 200,
    height: 200,
    ...Platform.select({
      ios: {
        shadowColor: "#000",
        shadowOffset: {
          width: 10,
          height: 10,
        },
        shadowOpacity: 0.5,
        shadowRadius: 10,
      },
      android: {
        elevation: 20,
      },
    }),
  },
});

Platform을 이용하여 iOS와 android에서 스타일 코드가 다르게 적용될 수 있도록 하였다.

 

너무 너무 간단하지만,,, 어쨌든 그림자 만들기 완성

 

iOS는 적용할 수 있는 그림자 속성이 많은 것 같은데

android는 그림자 색이나 이런 부가적인 속성을 지정하려면 third-party plugin이 필요한 것 같다...! (왜,,ㅜ_ㅜ)

 

 

+) 참고

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

Shadow Props · React Native