React-native에서 조건에 따라 이미지 가져오기

Question

React-native에서 static 이미지를 조건에 따라서 다르게 가져오고 싶습니다. 아래처럼 require를 사용해서 이미지를 가져올 때 조건에 따라서 url 구성을 다르게 해주도록 작성했는데 에러가 발생하면서 되지 않습니다.

const imageUrl = `../../foundation/${isDark ? bg-dark : bg-light}`
<Image source={require(imageUrl)} />

react-native에서 동적으로 이미지를 가져오는 방법이 있을까요?

이은재 · Answer

안녕하세요. react-native 이미지는 require 내부가 아니라 외부에서 분기를 해서 가져다 사용해야 합니다. 올려주신 두 이미지는

const background = isDark ? require(../../foundtion/bg-dark) : require(../../foundastion/bg-light)
<Image source={image} />

와 같이 작성하면 조건에 따라 다른 이미지를 사용하실 수 있을 것 같습니다.