React Native Expo에 SVG 추가하기

개발자라면 작업 중인 모든 프로젝트에서 SVG(Scalable Vector Graphics)로 작업했을 것이지만 React Native(Expo)에서 SVG는 앱에서 작업하기 위해 추가 단계가 필요합니다.

1. 앱 만들기




expo init test-svg


2. 앱 폴더로 이동




cd test-svg


3. 'react-native-svg' 추가




npm i react-native-svg


4. JS 파일 'TestSvg.js' 생성



아래에 다음 코드를 붙여넣으세요.

import * as React from "react";
import { SvgXml } from "react-native-svg";

export default function TestSvg(){  
  const svgcode = `paste your <svg> code here`;
  const Svg = () => <SvgXml xml={svgcode} width="set the width here" 
  height="set the height here" />;  

  return <Svg />;
}


5. 'App.js' 파일로 가져오기



다른 파일에 추가할 수 있습니다.

import * as React from "react";
import { View } from "react-native";
import TestSvg from "./TestSvg";

export default function App() {
return (
  <View>
    <TestSvg />
  </View>
 )
}


그게 다야 SVG 파일이 작동합니다.

좋은 웹페이지 즐겨찾기