[RN] 이미지에 변수 넣기

기본 틀

• Image를 불러오고 난 후 밑과 같은 방식으로 이미지를 불러온다.

import {Image} from 'react-native';

<Image style={{...styles.image}} source={require("../../assets/LOGO.png")} />

문제점

• 문제는 require부분은 변수로 빼면 작동을 안하는데 require함수 내부에서는 자바스크립트 변수가 적용이 안되기 때문이다.

import {Image} from 'react-native';

const url ="../../assets/LOGO.png"
// 에러
<Image style={{...styles.image}} source={require(url)} />

해결 방법

• 간단하게 require까지 전부 다 변수로 빼주면 작동한다.

import {Image} from 'react-native';

const url =require("../../assets/LOGO.png")
// 에러
<Image style={{...styles.image}} source={url} />