[react-native]이미지(image)파일 적용 어케 할까?

간단한건데 

맨날 헷갈려서 적어둔다.

 

 

 

먼저 이미지 파일을 구한다.

사용할 plus.png와 llama.png이다

귀엽다

 

 

 

 

 

적용할 파일이 있는 폴더에 넣어줬다 원하는 곳에 넣어도 된다

경로만 설정 잘 해주면 된다.

 

 

 

 

 

변수에 경로를 저장하고 사용하는 방법과 <image>태그에 직접 적어서 사용하는 방법 쓸거다

라마(llama.png)부터 넣어보자

 

 

 

 

 

코드 상단에 import친구들 많은곳에 적어줬다.

let imagePath = require('./llama.png'); //imagePath변수에 llama경로가 저장된다

 

 

 

 

밑에 image태그에 source속성 초기화

이미지에 height와 width를 안적어주면 표시되지 않으니 주의하자!!

 <Image
  style={{height: 50, width: 50, marginLeft: '30%', marginTop: -5}}
  source={imagePath}
 />

 

 

 

 

다음과 같이 나온다 메세지 내용은 팀원이 적었다. 난 style만 작업중이다

 

 

 

 

다음은 plus.png이다.

<Image
   style={{width: 30, height: 30}} //높이 너비 필수
   source={require('./plus.png')} //태그안에 직접 경로를 적어줬다
/>

 

 

 

다음과 같이 잘 나온다

 

 

 

 

 

지금 보니 위에서 보여준 plus랑 다른 plus파일이다 

 

 

상관없다