[React-Native] 그림자 효과 주기

1. Android에서 shadow효과 주기

android에서 shadow효과를 주는것은 간단하다.
View component의 style property에 elevation을 추가해주는것으로 구현 가능한데, 이 때 기본 shadow의 color는 black이다.

const styles = StyleSheet.create({
  container: {
    width:200,
    height:200,
    backgroundColor: '#ffffff',
    margin: 10,
    elevation: 200,
  },
});

위와 같이 설정하고 해당 style을 View component에 적용하면 된다.
그림자의 색상을 변경하기 위해서는 shadowColor property를 사용하면 되는데, 다음과 같이 설정하면 그림자의 색상이 파란색으로 변한다.

const styles = StyleSheet.create({
  container: {
    width:200,
    height:200,
    backgroundColor: 'red',
    margin: 10,
    elevation: 200,
    shadowColor:'blue'
  },
});

하지만 이런 방법은 android에서만 작동하기 때문에 ios에서는 다른 방법으로 shadow효과를 구현해야한다.

2. IOS에서 shadow효과 주기

ios에서 shadow효과를 주기 위해서는 react-native의 shadow property를 사용해야한다.
위에서 사용했던 shadowColor도 shadow property중 하나인데, 그림자의 색깔을 주는 것만 ios와 android모두에서 작동하고 나머지 property들은 ios에서만 작동한다.
shadow property는 다음과 같은 것들이 존재한다.

• shadowColor: 그림자의 색상을 조절한다
• shadowOffset: width와 height를 가지며, 그림자의 위치를 조절한다
• shadowRadius: 그림자가 얼마나 흐리게 번지는지를 조절한다
• shadowOpacity: 그림자의 투명도를 조절한다

다음과 같은 코드로 ios에 그림자를 추가할 수 있다.

const styles = StyleSheet.create({
  container: {
    width:200,
    height:200,
    backgroundColor: 'red',
    margin: 10,
    shadowColor: "black",
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 6,
    shadowOpacity: 0.25,
  },
});