React Native dynamic image (동적 이미지 변경)

React Native에서 이미지 경로를 동적으로 제어하는 방법을 알아보겠습니다.

 

React처럼 src안에서 분기처리는 불가능합니다.

// 잘못된 방법
<Image source={require(`./img/${name}`) }/>

 

방법 1.

js 상단에 이미지 경로를 변수에 담은 후 넣는 방법입니다.

// app.js
const icon = require('./img/icon.png');
const activeIcon = require('./img/activeIcon.png');
...
<Image source={bool?activeIcon:icon}/>

 

방법 2.

이미지 경로를 위한 js파일을 만들어 사용합니다.

확장성이 좋고 나중에 유지보수/추가개발을 할때도 좋아 저는 이 방법을 자주 사용합니다.

// iconPath.js
export const iconPath = {
  icon: require("./img/icon.png"),
  activeIcon: require("./img/activeIcon.png"),
};

// app.js
import { iconPath } from "./iconPath.js";
...
<Image source={imagePath.icon} />;