728x90
1. 패키지 설치
yarn add react-native-svg
yarn add react-native-svg-transformer
2. metro.config.js파일 수정
/* 기존 */
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
/* 수정 */
const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
})();
3. declarations.d.ts 파일 생성하기 (위치는 가장 밖) : 타입스크립트 사용자만
declare module "*.svg" {
import React from 'react';
import { SvgProps } from "react-native-svg";
const content: React.FC<SvgProps>;
export default content;
}
4. 다시 yarn run ios 하면 사용 가능
import People from "../assets/people.svg";
<People width={160} height={60} />
728x90
'FE' 카테고리의 다른 글
TS & RN - props 타입 선언법 (0) | 2022.07.06 |
---|---|
[RN] - Image태그 사용 방법 (0) | 2022.07.04 |
[RN] - 첫 세팅 이후 ~ 앱 실행 (0) | 2022.06.22 |
[RN] - 현재 사용하고 있는 폴더구조 (0) | 2022.06.22 |
[RN] - 권한 관련 처리 (0) | 2022.06.21 |