[React Native] SVG 이미지 로드 하기

tk_jang·2022년 11월 3일
0

React 와 다르게 React-Native 는 svg이미지를 바로 사용할 수 가 없다
그래서 아래의 라이브러리를 사용해야한다!

1. 라이브러리

github.com/react-native-svg/react-native-svg

2. 사용방법

먼저 설치한 라이브러리의 WithLocalSvg 라는 컴포넌트를 사용해주기 위해 임포트를 해야한다.

import {  WithLocalSvg } from 'react-native-svg';

그다음 아래와 같이 assets 폴더를 만들고 안에 images폴더를 만들고 그 안에 svg 파일들을 넣어준다.

그다음 사용할 컴포넌트에서 svg 파일을 임포트 해준다

import Block from './assets/images/block.svg';
import Arrow from './assets/images/arrow.svg';

그다음 넣어줄 위치에

<View>
  <WithLocalSvg
    width={100}
    height={100}
    asset={Block}
  />
</View>

위와 같이 넣어주면 완스어엉~

0개의 댓글