React Native 동적 이미지 추가 방법

 

생각보다 복잡한 너...

React와 비슷한 듯 다른 React-native😭

 

리액트 네이티브로 간단한 앱을 만들던 중, 날씨를 가시적으로 보여주는 아이콘을 추가하는 기능에서

내가 원하는 이미지로 넣어주고 싶었다.

날씨 api로 날씨를 받아와 날씨에 따라 이미지를 다르게 보여주고 싶어서 공식문서를 보니 Image 태그를 사용하면 되는 거였다.

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

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
      <Image
        style={styles.logo}
        source={{
          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
      />
    </View>
  );
}

공식 문서에 나와있는 사용법으로는 Image 태그 안의 source에 주소나 경로를 위의 방식으로 넣어주면 된다고 나와있다.

그래서 난 이런 식으로 경로의 동일한 부분은 문자열로 처리하고, 바뀌는 부분을 변수로 넣어줬다.

그랬더니 에러가 나는 것이다?

const icons = {
  Clouds: "Cloudy",
  Clear: "Sun",
  Atomosphere: "Partly-Cloudy",
  Snow: "Snow",
  Rain: "Rainy",
  Drizzle: "Partly-Drizzling",
  Thunderstorm: "Thunderstorm",
};

<Image
  style={styles.icon}
  source={require(`./assets/icon/${icons.Clear}.png`)}
/>

찾아보니 require에는 변수 할당이 되지 않는다고 한다ㅠㅜ

 

그래서, 결국 내가 선택한 방법은 이미지들의 경로를 require를 포함한 모든 부분을 객체의 키값으로 바꿔주고,

그 키값을 source에서 조회해 사용하는 것이다.

const icons = {
  Clouds: require("./assets/icon/Cloudy.png"),
  Clear: require("./assets/icon/Sun.png"),
  Atomosphere: require("./assets/icon/Partly-Cloudy.png"),
  Snow: require("./assets/icon/Snow.png"),
  Rain: require("./assets/icon/Rainy.png"),
  Drizzle: require("./assets/icon/Partly-Drizzling.png"),
  Thunderstorm: require("./assets/icon/Thunderstorm.png"),
};

<Image
  style={styles.icon}
  source={icons.Clear}
/>