웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > react native

react native Image컴포넌트 알아보기

Last Modified : 2019-09-19 / Created : 2018-08-09
13,098
View Count
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값을 가져온 경우 콘솔에 각각 그 값을 출력하는 예제입니다.


! aspectRatio를 사용하여 비율에 맞추기


만약 이미지를 비율에 맞추어 보여주는 경우 aspectRatio 스타일 속성을 사용합니다. 이 방법은 이미지의 width 또는 height가 길어나 영역을 벗어나는 경우 유용하게 사용할 수 있습니다.
<View>
  <Image style={{
    aspectRatio: 1.625,
    resizeMode: 'contain'
  }}
  source={require('testImg.jpg')} />
<View>

만약 1.625 비율에 맞추어 보여줄 경우 위와 같이 aspectRatio 값으로 1.625를 입력하면 됩니다.

Previous

하이브리드앱? React Native 알아보기