SVG-Dateien in React Native-Projekte importieren: Eine umfassende Anleitung

Die Verwendung von SVG-Dateien in Ihren React Native-Projekten kann genauso einfach sein wie die Verwendung in Webanwendungen. Die React-Native-Svg-Transformer-Bibliothek macht dies möglich, indem sie Ihre importierten SVG-Bilder in React-Komponenten umwandelt. Dieser Leitfaden führt Sie durch die Installation, Konfiguration und Verwendung von React-Native-SVG-Transformer in Ihren React Native-Projekten.

Vorteile

• Konsistenz: Verwenden Sie dieselben SVG-Dateien sowohl für React Native als auch für Webprojekte.
• Flexibilität: SVG-Dateien einfach importieren und als React-Komponenten verwenden.

Schritt-für-Schritt-Installation und Konfiguration

Schritt 1: Installieren Sie die React-Native-SVG-Bibliothek

Stellen Sie zunächst sicher, dass Sie die React-Native-SVG-Bibliothek installiert haben. Diese Bibliothek stellt die notwendigen Komponenten zum Rendern von SVG-Bildern in React Native bereit.

Zur Installation führen Sie Folgendes aus:

npm install react-native-svg

oder

yarn add react-native-svg

Detaillierte Installationsanweisungen finden Sie auf der GitHub-Seite „react-native-svg“.

Schritt 2: Installieren Sie die React-Native-SVG-Transformer-Bibliothek

Als nächstes installieren Sie die React-Native-Svg-Transformer-Bibliothek, die Ihre SVG-Dateien in React-Komponenten umwandelt.

Zur Installation führen Sie Folgendes aus:

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

oder

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

Schritt 3: Konfigurieren Sie den React Native Packager

Abhängig von Ihrem Setup (Expo oder React Native CLI) unterscheidet sich die Konfiguration. Nachfolgend finden Sie die Konfigurationen für verschiedene Umgebungen:

Für Expo SDK v41.0.0 oder neuer

Erstellen oder aktualisieren Sie Ihre Datei metro.config.js mit der folgenden Konfiguration:

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;
})();

Für React Native v0.72.1 oder neuer

Erstellen oder aktualisieren Sie Ihre Datei metro.config.js mit der folgenden Konfiguration:

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);

Für React Native v0.59 oder neuer

Erstellen oder aktualisieren Sie Ihre Datei metro.config.js mit der folgenden Konfiguration:

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"]
    }
  };
})();

Reagieren Sie auf native Projekte mithilfe von Expo-Modulen

Bei Projekten, die Expo-Module ohne expo-cli verwenden, müssen Sie möglicherweise den Transformatorpfad anpassen, um den Transformator von React Native korrekt zu verwenden:

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

Alternativ können Sie erzwingen, dass der Transformator von Expo immer verwendet wird:

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

Verwendung von TypeScript

Wenn Ihr Projekt TypeScript verwendet, müssen Sie das Modul für SVG-Dateien deklarieren. Fügen Sie Ihrer Datei „declarations.d.ts“ Folgendes hinzu (erstellen Sie sie, falls sie nicht vorhanden ist):

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

Verwendung

Nach der Installation und Konfiguration können Sie SVG-Dateien wie jede andere Komponente in Ihre React-Komponenten importieren und verwenden.

Beispiel:

1. Importieren Sie die SVG-Datei:
   

   import Logo from "./logo.svg";
   

   Nach dem Login kopieren

2. Verwenden Sie das SVG als Komponente:
   

   Nach dem Login kopieren

Zusätzliche Ressourcen

• Demo-Projekte:
  • react-native-svg-example
  • react-native-svg-expo-example

Wenn Sie dieser Anleitung folgen, sollten Sie in der Lage sein, SVG-Dateien nahtlos in Ihre React Native-Projekte zu integrieren, Ihren Entwicklungsworkflow zu verbessern und die Konsistenz über verschiedene Plattformen hinweg aufrechtzuerhalten.

Folgen Sie mir für weitere Artikel!

以上是SVG-Dateien in React Native-Projekte importieren: Eine umfassende Anleitung的详细内容。更多信息请关注PHP中文网其他相关文章！