[React Native] Image source를 String 계산값으로 취하기

문제

import React from "react";
import { dice1, dice2, dice3, dice4, dice5, dice6 } from "../../../assets/play";

export default function ({ isTurn, value, hold, onPress }) {
  const imageSource = `dice${value}`;
  return (
    <Container disabled={!isTurn} hold={hold} onPress={onPress}>
      <DiceImage source={imageSource} />
      <DiceImage source={{ uri: `dice${value}` }} />
    </Container>
  );
}

두개의 코드

모두 assets의 파일을 도통 참조하지 않는다.

 

 

해결책

import React from "react";
import { dice1, dice2, dice3, dice4, dice5, dice6 } from "../../../assets/play";

const IMAGES = {
  image1: dice1,
  image2: dice2,
  image3: dice3,
  image4: dice4,
  image5: dice5,
  image6: dice6,
};

const getImage = (num) => {
  return IMAGES["image" + num];
};

export default function ({ isTurn, value, hold, onPress }) {
  return (
    <Container disabled={!isTurn} hold={hold} onPress={onPress}>
      <DiceImage source={getImage(value)} />
    </Container>
  );
}