React Native 프로젝트에서 SVG 파일 가져오기: 종합 가이드

React Native 프로젝트에서 SVG 파일을 사용하는 것은 웹 애플리케이션에서 사용하는 것만큼 간단할 수 있습니다. React-native-svg-transformer 라이브러리를 사용하면 가져온 SVG 이미지를 React 구성 요소로 변환하여 이를 가능하게 합니다. 이 가이드는 React Native 프로젝트에서 React-native-svg-transformer의 설치, 구성 및 사용 방법을 안내합니다.

이익

• 일관성: React Native와 웹 프로젝트 모두에 동일한 SVG 파일을 사용합니다.
• 유연성: SVG 파일을 React 구성 요소로 쉽게 가져와 사용할 수 있습니다.

단계별 설치 및 구성

1단계: React-native-svg 라이브러리 설치

먼저, React-native-svg 라이브러리가 설치되어 있는지 확인하세요. 이 라이브러리는 React Native에서 SVG 이미지를 렌더링하는 데 필요한 구성 요소를 제공합니다.

설치하려면 다음을 실행하세요.

npm install react-native-svg

또는

yarn add react-native-svg

자세한 설치 지침은 React-native-svg GitHub 페이지를 참조하세요.

2단계: React-native-svg-transformer 라이브러리 설치

다음으로, SVG 파일을 React 구성 요소로 변환하는 React-native-svg-transformer 라이브러리를 설치하세요.

설치하려면 다음을 실행하세요.

npm install --save-dev react-native-svg-transformer

또는

yarn add --dev react-native-svg-transformer

3단계: React Native Packager 구성

설정(Expo 또는 React Native CLI)에 따라 구성이 달라집니다. 다음은 다양한 환경에 대한 구성입니다.

Expo SDK v41.0.0 이상

다음 구성으로 Metro.config.js 파일을 생성하거나 업데이트하세요.

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer/expo")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

React Native v0.72.1 이상

다음 구성으로 Metro.config.js 파일을 생성하거나 업데이트하세요.

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve(
      "react-native-svg-transformer/react-native"
    )
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

module.exports = mergeConfig(defaultConfig, config);

React Native v0.59 이상

다음 구성으로 Metro.config.js 파일을 생성하거나 업데이트하세요.

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve(
        "react-native-svg-transformer/react-native"
      )
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

Expo 모듈을 사용하여 네이티브 프로젝트 반응

expo-cli 없이 Expo 모듈을 사용하는 프로젝트의 경우 React Native의 변환기를 올바르게 사용하려면 변환기 경로를 조정해야 할 수도 있습니다.

-require.resolve("react-native-svg-transformer")
+require.resolve("react-native-svg-transformer/react-native")

또는 Expo의 변환기를 항상 사용하도록 강제합니다.

-require.resolve("react-native-svg-transformer")
+require.resolve("react-native-svg-transformer/expo")

타입스크립트 사용

프로젝트에서 TypeScript를 사용하는 경우 SVG 파일용 모듈을 선언해야 합니다. Declaration.d.ts 파일에 다음을 추가합니다(없는 경우 생성).

declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC981cdbd8ae5a6d67f095ee0236cff3c4;
  export default content;
}

용법

설치 및 구성 후에는 다른 구성 요소와 마찬가지로 React 구성 요소에서 SVG 파일을 가져와 사용할 수 있습니다.

예:

1. SVG 파일 가져오기:
   

   import Logo from "./logo.svg";
   

2. SVG를 구성 요소로 사용:
   

   <Logo width={120} height={40} />
   

추가 리소스

• 데모 프로젝트:
  • 반응 네이티브-svg-예
  • react-native-svg-expo-예

---

이 가이드를 따르면 SVG 파일을 React Native 프로젝트에 원활하게 통합하여 개발 작업 흐름을 향상하고 다양한 플랫폼에서 일관성을 유지할 수 있습니다.

더 많은 기사를 보려면 저를 팔로우하세요!

위 내용은 React Native 프로젝트에서 SVG 파일 가져오기: 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!