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 파일이 작동합니다.
Reference
이 문제에 관하여(React Native Expo에 SVG 추가하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/devninjaade/adding-svgs-in-react-native-expo-1hnl
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
expo init test-svg
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 파일이 작동합니다.
Reference
이 문제에 관하여(React Native Expo에 SVG 추가하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/devninjaade/adding-svgs-in-react-native-expo-1hnl
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
npm i react-native-svg
아래에 다음 코드를 붙여넣으세요.
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 파일이 작동합니다.
Reference
이 문제에 관하여(React Native Expo에 SVG 추가하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/devninjaade/adding-svgs-in-react-native-expo-1hnl
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import * as React from "react";
import { View } from "react-native";
import TestSvg from "./TestSvg";
export default function App() {
return (
<View>
<TestSvg />
</View>
)
}
Reference
이 문제에 관하여(React Native Expo에 SVG 추가하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/devninjaade/adding-svgs-in-react-native-expo-1hnl텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)