RN Expo에서 이미지 동적으로 불러오기 삽질 기록

React Native Expo 사이드바 컴포넌트 만들어줘. 아이콘 이름이 문자열로 된 배열 받아서 이미지 동적으로 불러오는 방식으로

사이드바 만들다가 이미지 때문에 한참 헤맸는데 나중에 나같은 사람 있을까봐 남겨둠

아이콘 이름을 배열에 문자열로 넣고 이렇게 쓰면 되겠지~ 했는데

src={`src/assets/${item.icon}`}
// ...
<Image source={{ uri: src }} />

이게 그냥 안됨. 번들러가 동적 경로는 추적을 못한다고. 나는 그냥 되는줄 알았지

해결법은 미리 require로 다 맵핑해놓는 거임

const iconMap = {
  "home.svg": require("./assets/home.svg"),
  "cog-6-tooth.svg": require("./assets/cog-6-tooth.svg"),
  "arrow-left-start-on-rectangle.svg": require("./assets/arrow-left-start-on-rectangle.svg")
};

그다음 이렇게 쓰면 됨

<SidebarItem
  src={iconMap[item.icon]}
  // ...
/>

<Image
  source={src}
  style={{ width: 24, height: 24 }}
/>

번들러한테 미리 알려줘야 한다는게 포인트. uri로 넘기는거 아니고 그냥 source에 바로 넣으면 됨. 별거 아닌데 한참 걸렸네