리액트 네이티브] 16. Image

리액트는 같은 이름에 @2x, @3x를 붙이면 해상도에 따라 x2, x3의 사진을 자동으로 붙인다.

 

이제 사진을 이용해보자.

 

- ../src/image.js

import checkBoxOutline from '../assets/icons/check_box_outline.png'
import checkBox from '../assets/icons/check_box.png'
import deleteForever from '../assets/icons/delete_forever.png'
import edit from '../assets/icons/edit.png'

export const images = {
    uncompleted : checkBoxOutline,
    complete : checkBox,
    delete : deleteForever,
    update : edit,
}

 

이렇게 enum으로 이름과 파일을 지정해두면 쓰기 편해진다.

사용법을 보자.

 

- .../component/IconButton.js

import React from "react";
import { TouchableOpacity } from "react-native";
import styled from 'styled-components/native';
import PropsTypes from 'prop-types';
import { images } from "../image";

const Icon = styled.Image`
    width: 30px;
    height: 30px;
    margin: 10px;
`

const IconButton = ({ type, onPressOut }) => {
    return (
        <TouchableOpacity onPressOut={onPressOut}>
            <Icon source={type} />
        </TouchableOpacity>
    );
}

IconButton.PropsTypes = {
    type: PropsTypes.oneOf(Object.values(images)).isRequired,
    onPressOut: PropsTypes.func,
}

export default IconButton;

 

TouchableOpacity를 이용하는 이유는, 버튼의 경우 안드로이드와 아이폰이 생김새가 다르기 때문이다.

TouchableOpacity내부에 styled-components를 이용해 커스텀 된 이미지를 넣는다.

 

 

- ../src/App.js

...
import IconButton from "./component/IconButton";
import { images } from "./image";

...

                <IconButton type={images.uncompleted} />
                <IconButton type={images.complete} />
                <IconButton type={images.delete} />
                <IconButton type={images.update} />

            </Container>
        </ThemeProvider>
    );
}

 

다음처럼 프로퍼티에 이미지를 집어넣으면, IconButton에서 프로퍼티를 받아서 이미지 자체가 가진 프로퍼티인 source에 넣게 된다.

결과를 보자.