리액트 네이티브] 10. 그림자

여태까지 앱 개발 하면서 쉐도우 기능을 별로 써 본적은 없는거 같지만(...) 

그림자는 안드로이드와 iOS 가 다른 방식으로 스타일이 정해진다.

 

iOS : 

• shadowColor : 그림자 색
• shadowOffset : 그림자 거리(width와 height를 이용해서 지정)
• shadowOpacity : 그림자 불투명도 설정
• shadowRadius : 그림자 흐림 반경 설정

Android : 

• elevation : 그림자 설정

이렇게 기기마다 설정이 나뉘는 경우에는 react-native에 저장된 모듈 중 Platform을 이용하여 나눌 수 있다.

예시를 보자.

 

- ../src/component/ShadowBox.js

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,
            },
        }),
    },
});

 

- ../src/App.js

import { Contents, Footer, Header } from "../component/Layout";
import ShadowBox from "../component/ShadowBox";
import { ColumnExample } from "../component/Flex";
import EventButton from "../component/EventButton";

const App = () => {
    return (
        <View style = {viewStyle.container}>
            <ShadowBox />
        </View>
    );
};


export default App;

 

그럼 다음과 같이 화면에 출력된다

 

둘 다 그림자가 생기는데, 아무래도 플랫폼 차이 때문에 그림자의 생김새가 차이가 나는 것이 보일 것이다.

 

 

+++) 추가

공부할때까지만 해도

export default() =>

와

export const ColumnExample = () =>

의 차이점을 몰랐는데.

의

import ShadowBox from "../component/ShadowBox";

import { ColumnExample } from "../component/Flex";

{} 차이라고 한다. default의 경우 괄호를 빼고, 변수명이 지정되어 있을 경우, 괄호를 넣어야 한다.