[React Native] react-native-shadow-2로 shadow 효과 주기

드디어 react native로 퍼블리싱을 하는데..

세팅부터 뭐하나 쉬운게 없다.

 

그중에서 shadow효과는 ios와 android에서 조정할 수 있는 속성 종류가 다르다.

 

* ios
-shadowColor
-shadowOffset
-shadowOpacity
-shadowRadius

* android
-elevation

 

android야..?

이게 다냐고..

 

https://www.npmjs.com/package/react-native-shadow-2

그래서 react-native-shadow-2를 사용해서

두 기종의 핸드폰에서 균일한 그림자를 만들 수 있다.

 

npm 혹은 yarn을 이용해서 설치하고

<Shadow>컴포넌트로 그림자를 주고 싶은 요소를 감싸서 만든다.

 

 

*주의할 점: borderRadius가 안먹는다??

아니.. 왜 borderRadius가 갑자기 안먹는 것인가?

<Shadow distance={15} startColor={'#eb9066d8'} endColor={'#ff00ff10'} offset={[3, 4]}>
  <View style={{ borderTopStartRadius: 24, borderBottomEndRadius: 0, borderRadius: 10, backgroundColor: '#c454f0dd' }}>
    <Text style={{ margin: 20, fontSize: 20 }}>🤯</Text>
  </View>
</Shadow>

 

공식 문서에 나온 예시를 따왔다.

그리고 자세히 보면

 

If the Shadow has a single child, it will get the width, height and all of the borderRadius properties from the children's style property, if defined.

 

shadow에 child가 있으면 child의 width, height, borderRadius를 갖게 된다고 한다.

상속을 역으로 하는거라 생각하면 된다.

 

만약 자식 요소에 상관없이 shadow에 값을 주고 싶다면

shadow에 바로 스타일값을 주면 된다.

inline으로 주는 방식은 다른 스타일 주는 방식과 다를바가 없으나

StyleSheet안에서 shadow에 대한 스타일 주는 방식은 약간 다르다.

shadowContainer: {
  style: {borderRadius: 4}
}

<Shadow>컴포넌트 안에 ...라는 전개 연산자를 이용하여

shadowContainer 스타일을 전달하면 스타일이 적용이 된다.

특이하게도 React Native에서는 스타일 객체 속성을 전개 연산자로 전달하면

알아아서 스타일이 먹는다 하니 신기할 따름이다.

 

여기서 주의할 점은 <Shadow> 컴포넌트에

인라인으로 style이 적혀져있으면

둘 중 하나의 style이 덮여버린다..................

<Shadow style={{ height: heightValue }}>
  {children}
</Shadow>

따라서 borderRadius가 씹히는 현상이 생긴다면

인라인 스타일 속성 옆에 나란히 스타일을 주면 된다.