동적 이미지 추가

날씨 앱을 만들면서 아래와 같이 이미지를 보여주려고했더니 에러가 발생했다.
찾아보니 require에는 변수 할당이 되지않는다고 한다.

나는 ../assets/image/clear.png로 읽히기를 기대했는데,
../assets/image/${icons[props.days[0].weather[0].main]}로 읽혀버리는게 문제다.

const icons = {
  Cloud : "cloud.png",
  Clear: "clear.png",
  Snow: "snow.png",
  Rain: "rain.png",
}

<Image source={require(`../assets/image/${icons[props.days[0].weather[0].main]}`)}/>

어떻게 하지..

아래와 같이 해결했다.

  const [clear, setClear] = useState(false);
  const [cloud, setCloud] = useState(false);
  const [rain, setRain] = useState(false);
  const [snow, setSnow] = useState(false);

  const icons = {
    Clear: require('../assets/image/clear.png'),
    Clouds : require('../assets/image/cloud.png'),
    Rain: require('../assets/image/rain.png'),
    Snow: require('../assets/image/snow.png'),
  }

  useEffect(() => {
    if(props.days[0] !== undefined) {
      switch(props.days[0].weather[0].main) {
        case 'Clear' :
          setClear(true);
          break;
        case 'Clouds' :
          setCloud(true)
          break;
        case 'Rain' :
          setRain(true);
          break;
        case 'Snow' :
          setSnow(true);
          break;
      }
    } 
  },[props]);

      <View style={styles.cont}>
        {props.days[0].weather[0].main === undefined ? (
          <Text>아이콘 준비중!</Text>
        ) : (
          <>
          {clear && <Image source={icons.Clear} />}
          {cloud && <Image source={icons.Cloud} />}
          {rain && <Image source={icons.Rain} />}
          {snow && <Image source={icons.Snow} />}
          </>
        )}

수정 2022-07-01 토