Image 컴포넌트 사용 및 resizeMode

이미지 사용하기

리액트 네이티브에서 이미지를 화면에 보여줄 때는 Image라는 컴포넌트를 사용한다. 

여기 circle라는 이미지가 크기 별로 3가지가 있다.

 

circle.png (200px * 200px)

circle@2x.png (400px * 400px)

circle@3x.png (600px * 600px)

circle.png 파일 하나만 있어도 컴포넌트에 불러와 사용하는데는 지장이 없지만, 화면의 밀도에 따른 다른 이미지를 보여줘야 선명도가 일정하다.

리액트 네이티브에서 스타일링할 때 크기는 모두 dp로 설정한다. dp(density-independent pixel)란 1인치당 픽셀 밀도에 따라 크기가 일관된 UI를 보여줄 수 있는 단위이다.

• dp = px * 160 / ppi
• px = dp * ppi / 160

iPhone 11 Pro에 화면 해상도는 2436px * 1125px이고, 화면 밀도는 458ppi이다.

만약 iPhone 11 Pro에서 너비 200의 사이즈에 선명한 이미지를 보여주려면 200 * 485 / 160 = 572.5px의 너비를 가진 이미지를 사용해야 한다. 따라서 이 크기와 가장 비슷한 circle@3x.png를 사용해야 선명하게 보여줄 수 있다.

 

이제 circle.png를 가지고 Image 컴포넌트를 사용해 이미지를 화면에 나타내보자.

Image 컴포넌트에 source라는 속성으로 경로를 지정할 수 있고, 경로를 입력할 때는 require()라는 함수로 입력해야 한다.

import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';

function Empty() {
  return (
    <View style={styles.container}>
      <Image
        source={require('../assets/images/circle.png')}
        style={{marginBottom: 20}}
      />
      <Text style={styles.emptyText}>게시글이 없습니다.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  emptyText: {
    fontSize: 24,
    color: '#9e9e9e',
  },
});

export default Empty;

위 처럼 디바이스 별로 각자 다른 이미지가 불러와지는 것을 확인할 수 있다.

 

resizeMode 이해하기

Image 컴포넌트는 따로 설정하지 않으면 실제 이미지 크기를 기반으로 dp 단위의 크기로 변환되어 나타난다.

예를 들어 circle.png 이미지는 별도로 설정하지 않으면 200dp * 200dp의 사이즈로 보인다.

그럼 스타일 속성으로 Image 컴포넌트의 크기를 300dp * 200dp로 설정해보겠다.

<Image
  source={require('../assets/images/circle.png')}
  style={{marginBottom: 20, width: 300, height: 200}}
/>

스타일로 이미지 크기를 조정할 때 실제 이미지 크기와 값이 다르면 리사이징이 된다.

리사이징할 때 다양한 옵션을 설정할 수 있는데, 이는 resizeMode 속성을 통해 설정이 가능하다.

<Image
  source={require('../assets/images/circle.png')}
  style={{marginBottom: 20, width: 300, height: 200}}
  resizeMode="cover"
/>

resizeMode는 총 5가지 값으로 설정할 수 있다.

 

• cover(default)
  

  

  
  이 옵션은 이미지의 가로 세로 비율을 유지한 상태로 이미지를 리사이징한다.
  이미지와 뷰의 가로 세로 비율이 일치하지 않을 경우 이미지의 일부분이 잘린다.
  
  
  
• contain
  

  

  
  이미지의 가로 세로 비율을 유지한 상태로 이미지를 리사이징하며 이미지의 모든 영역이 뷰 안에 보이게 한다.
  
  

 

• stretch
  

  

  
  뷰의 크기대로 이미지를 리사이징한다.
  이 과정에서 이미지의 가로 세로 비율이 원본과 달라질 수 있다.
  
  

 

• repeat
  

  

  
  뷰의 크기가 이미지의 크기보다 크면 바둑판식으로 이미지를 반복한다.
  
  
  

 

• center
  

  

  
  이미지를 뷰 중앙에 둔다. contain과 마찬가지로 이미지의 모든 영역이 뷰 안에 보이게 한다. 단, 뷰가 이미지보다 크면 이미지의 크기가 커지지 않고 원본 사이즈를 유지한다.
  참고로 center는 화면 밀도에 따라 디바이스별로 다른 결과(여백의 크기가 달라짐)가 나타날 수 있다.

 

외부 이미지 사용하기

Image 컴포넌트로 프로젝트 내에 있는 이미지 외에 인터넷상 이미지도 보여줄 수 있다. 외부 이미지를 설정할 때는 다음과 같이 객체에 uri 값을 설정해 source 속성에 uri로 설정하면 된다.

<Image
  source={{
    uri: 'https://s.pstatic.net/static/www/img/uit/sp_main_dba1af.png',
  }}
  style={{
    marginBottom: 20,
    width: 300,
    height: 250,
    backgroundColor: 'gray',
  }}
  resizeMode="contain"
/>