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

[ 라이브러리 ]

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

react-native-svg/react-native-svg

---

프로젝트를 진행하다 보면 대부분의 경우 이미지 파일을 사용하게 됩니다.

간단한 아이콘의 경우 여러 이미지 확장자 중 svg를 사용하는 경우가 많은데

react-native에서는 추가 설정 없이는 로컬에 있는 svg 파일을 바로 불러올 수 없습니다:(.

 

react-native에서 svg 이미지를 사용하기 위해 위 라이브러리를 사용했습니다!

 

설치 방법

npm install react-native-svg

 

react-native 0.60 이상이라면 아래와 같이 입력해주세요!

cd ios && pod install

 

그 이하라면 아래와 같이 해주세요!

react-native link react-native-svg

 

 

이미지 불러오는 방법 1

첫 번째 방법은 'WithLocalSvg' 컴포넌트를 이용하는 방법입니다.

해당 컴포넌트를 이용하면 별도의 metro.config.js 설정 없이 바로 svg 파일을 로드할 수 있습니다.

 

※ 이 방법은 렌더링 요소가 많아졌을 시 이미지 로드 속도가 느린 게 체감이 됩니다!

따라서 간단한 화면이 아니라면 해당 방법보다는 다른 방법을 이용하는 것이 좋을 거 같아요ㅎㅎ

 

[ 예시 코드 ]

import React from 'react';
import { View, StyleSheet, Text, } from 'react-native';
import { WithLocalSvg } from 'react-native-svg';
import TestSvg from '../assets/images/test.svg';

const PostSvg = () => {
    return (
        <View style={styles.rootContainer}>
            <WithLocalSvg
                width={100}
                height={100}
                fill={"#000000"}
                asset={TestSvg}
            />
            <Text style={styles.text}>'WithLocalSvg'를 이용해서 이미지 로드!</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    rootContainer: {
        flex: 1,
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#ffffff"
    },
    text: {
        marginTop: 30,
    }
})

export default PostSvg;

 

 

이미지 불러오는 방법 2

두 번째 방법은 라이브러리 README 파일에 명시되어 있는 방법입니다.

별도의 설정이 필요하지만 이 방법이 정석인 거 같아요!

 

해당 방법은 아래 링크에 나와 있습니다!

github.com/react-native-svg/react-native-svg#use-with-svg-files

 

안내되어 있는 데로 react-native-svg-transformer를 설치하고 metro.config.js를 설정하면

아래와 같이 svg파일을 이용할 수 있습니다.

 

※이 방법은 1번 방법과 동시에 사용할 수 없습니다..!

※metro.config.js는 프로젝트 디렉터리에 있습니다!

※만약 이미지가 보이지 않는다면 fill, width, height props를 조정해 보세요!

[ 예시 코드]

import React from 'react';
import { View, StyleSheet, Text, } from 'react-native';
import TestSvg from '../assets/images/potion.svg';

const PostSvg = () => {
    return (
        <View style={styles.rootContainer}>
            <TestSvg
                width={100}
                height={100}
                fill={"#000000"}
            />
            <Text style={styles.text}>svg 이미지 로드!</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    rootContainer: {
        flex: 1,
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#ffffff"
    },
    text: {
        marginTop: 30,
    }
})

export default PostSvg;

 

 

---

읽어주셔서 감사합니다.

혹시 본 게시글 중 틀린 내용이 있다면 댓글을 통해 알려주세요 :)