[React Native] Image 사용

React Native로 이미지를 로딩하는 방식은 간단히 두가지로 나뉘다.

 

1. 이미지를 각 사이즈별로 Android, iOS에 프로젝트에 각각 등록하고 uri로 로드해서 사용

2. react-native 프로젝트 내부에 파일을 두고 source attribute로 불러서 사용

 

이미지를 각 해상도별로 나뉘어 관리를 하면 이미지 생성이나 폴더별 파일 관리등 관리에 수고는 많이 들어갈지 몰라도 해상도별로 깔끔한 이미지가 제공되므로 기업에서 서비스하는 앱의 경우 아래와 같이 이미지를 여러개 만들어 프로젝트 자체에 등록해 두고 사용하는 방식이 선호된다.

위 이미지는 안드로이드 해상도별 이미지 사이즈에 대한 정보이다. 하나의 이미지를 해상도별 5가지 파일로 만들어 안드로이드 프로젝트의 리소스 폴더에 drawable-hdpi ... 등의 폴더에 나눠서 넣어야 한다. 이는 iOS도 마찬가지로 해상도별 이미지를 만들어 xcode 프로젝트에 각각 넣어주어야 한다.

 

하지만 개인프로젝트를 진행할때는 편의성 측면에서 하나의 이미지를 react-native 프로젝트 내부에 두고 사용하는 방식이 더욱 선호된다.

 

2번 방식의 source 속성을 사용하려면 require 함수로 사용할 이미지를 미리 로딩해야 한다. 동적으로 이미지 uri을 만들어 이미지를 로딩하기는 힘들다.

import { Image } from 'react-native';

...

const randomFileImage = getRandomFileName();

const sourceUri = `images/${randomFileImage}.png`
<Image source={require(sourceUri)}/>

위 방식은 동작하지 않는다.

 

만약 화면로딩시마다 여러개의 파일 중 랜덤하게 하나를 골라서 보여주어야 한다면 미리 require로 이미지 소스를 불러두고 사용해야 한다.

const images = [
    require('images/enable-to-eat/01.png'),
    require('images/enable-to-eat/02.png'),
    require('images/enable-to-eat/03.png')
];

const randomIndex = Math.floor(Math.random() * 3)
<Image source={images[randomIndex]}/>