react native에서 사용하는 Image 컴포넌트에 대하여 일아봅니다.




# react native Image 컴포넌트 사용하기Image 컴포넌트는 아래와 같이 사용합니다.

<Image />

이때 이미지 경로 등의 값을 설정하기 위해 아래와 같은 props를 사용합니다.

@ source
이미지의 경로, 위치를 가지는 값입니다. 예를들어 ./images/에 존재하는 test.jpg인 경우 아래와 같이 적용할 수 있습니다.
<Image source = {require('./image/test.jpg')} />
위에서는 source 내부에 require()를 사용하여 경로를 지정하였습니다.


또 다른 방법으로 아래처럼 uri를 사용하는 것 역시 가능합니다. 아래 코드 역시 동일하게 이미지층 출력합니다.
<Image source = {{ uri: '/image/test.jpg'}} />


! base64 타입 출력하기또한 Image 컴포넌트에 base64의 이미지를 추가할 수 있습니다. 아래와 같이 적용합니다.
<Image source = {{ uri: 'data:img/png; base64, VEdIFshdbHfjdje.....'}} />


@ style
다른 컴포넌트처럼 스타일을 지정합니다. width, height 값 역시 아래처럼 이를 사용하여 지정할 수 있습니다.
<Image style={{ width: 300, height: 300 }} />




# Image 컴포넌트 메소드 알아보기Image 컴포넌트는 매우 유용한 다양한 메소드를 가지고 있습니다. 몇 가지 자주 사용되는 것부터 알아보겠습니다.

! getSize 메소드이미지의 사이즈를 알아내는데 사용하는 메소드입니다. 사용 방법은 아래와 같습니다.

Image.getSize(uri, success, [failure]);

이때 uri는 위치값이며 success와 failure는 콜백될 함수를 설정합니다. failure는 옵션으로 반드시 필요한 것은 아닙니다. 아래처럼 간단한 예제를 만들어보겠습니다.
Image.getSize('./images/test.jpg, (width, height) => { console.log(width + ' - ' + height); });

이 예제는 width, height값을 가져온 경우 콘솔에 각각 그 값을 출력하는 예제입니다.