# dynamic image import

react-native에서 이미지를 동적으로 import 하는 방법에 대해 알아보겠습니다.

  • react나 다른 웹에서는 아래와 같이 image를 동적으로 가져올 수 있습니다.
<img src={src} />

<img src={loading ? './loading.png' : './not-loading.png'} />

<img src={`./${imgPath}.png`} />
  • 그런데 react-native에서는 image를 동적으로 가져오는 것을 지원하지 않습니다. 심지어 삼항연산자 또는 template leterial(`)을 사용하여 변수를 가져오는 방법도 불가능합니다. 그렇기 때문에 아래와 같이 static하게 이미지를 가져와야 하죠
<Image source={require(".imImg.png")} />

# 동적 import 하는 방법

# 컴포넌트 분기로 import 하는 방법

  • rn에서 동적으로 image를 가져올 상황이라면 아래와 같이 컴포넌트를 분기 처리해야합니다.
const icon = this.props.active
  ? require("image!my-icon-active")
  : require("image!my-icon-inactive");
<Image source={icon} />;

# path를 등록하여 동적 import 하는 방법

  • 또 다른 방법으로 image파일 밑으로 전체 파일에 대한 path를 미리 만들어 놓는 방법이 있습니다.
// imgPath.js
export const imagePath = {
  BAD: require("./bad.png"),
  NORMAL: require("./normal.png"),
  GOOD: require("./good.png")
};

위 처럼 imagePath 파일을 만들고 컴포넌트에서 아래와 같이 사용합니다.

import { imagePath } from "@/assets/images/imagePath";
const icon = "GOOD";

<Image source={imagePath.icon} />;

Path를 등록하는게 귀찮지만 한번 등록하면 일반 웹에서와 같은 방식으로 동적 import를 할 수 있기 때문에 저는 이 방법을 사용하고 있습니다.

여러분들의 상황에 맞게 좋은 방법으로 구현하시면 좋을 것 같습니다!

#react-native #react
노경환
이 글이 도움이 되셨다면! 깃헙 스타 부탁드립니다 😊😄
최근변경일: 5/14/2022, 8:52:31 AM