Wie zeige ich eine SVG-Datei auf React Native an?

Lesezeit: 8 Minuten

Benutzer-Avatar
the_bluescreen

Ich möchte SVG-Dateien anzeigen (ich habe eine Reihe von SVG-Bildern), aber das Ding konnte ich nicht finden. Ich habe versucht zu verwenden Bild und Verwenden Komponenten von reagieren-native-svg aber damit arbeiten sie nicht. Und ich habe versucht, das auf native Weise zu tun, aber es ist wirklich harte Arbeit, nur ein SVG-Bild zu zeigen.

Beispielcode:

import Svg, {
  Use,
  Image,
} from 'react-native-svg';

<View>
  <Svg width="80" height="80">
     <Image href={require('./svg/1f604.svg')} />
  </SvgRn>
</View>

Ich weiß auch, dass React Native SVG grundsätzlich nicht unterstützt, aber ich denke, jemand hat dieses Problem auf knifflige Weise behoben (mit/ohne React-Native-Svg).

  • Sie können use nicht verwenden, um eine ganze Datei anzuzeigen, dafür benötigen Sie image.

    – Robert Longson

    8. August 2016 um 13:55 Uhr


  • Ja, ich habe es auch versucht @RobertLongson, aber es funktioniert auch nicht.

    – the_bluescreen

    8. August 2016 um 13:57 Uhr

  • Sie können es als CSS-Hintergrundbild hinzufügen, haben Sie es versucht?

    – danielarend

    8. August 2016 um 14:01 Uhr

  • Ich habe versucht, aber die native Ansichtskomponente zu reagieren, unterstützt keine backgroundImage-Prop im CSS-Stil. @danielend

    – the_bluescreen

    8. August 2016 um 14:08 Uhr


  • Ich bin mir nicht sicher, warum Sie einen SVG-Wrapper verwenden würden, um ein SVG-Bild zu verpacken.

    – Robert Longson

    8. August 2016 um 14:08 Uhr

Benutzer-Avatar
Ihor Burlachenko

Ich habe folgende Lösung verwendet:

  1. Konvertieren .svg Image zu JSX mit https://svg2jsx.herokuapp.com/
  2. Konvertieren Sie die JSX in react-native-svg Komponente mit https://react-svgr.com/playground/?native=true (Stellen Sie sicher, dass das Kontrollkästchen “React Native” aktiviert ist)

  • Wie benutzt man diese Komponente dann? Können Sie einen Code teilen?

    – Indranil Dutta

    23. Oktober 2018 um 11:03 Uhr

  • Wenn Sie diesem Link folgen, sehen Sie ein Beispiel mit Importen svgr.now.sh (Aktivieren Sie das Kontrollkästchen “React Native”). Verwenden Sie es als reguläre React-Komponente, platzieren Sie es anstelle von und es sollte funktionieren.

    – Ihor Burlachenko

    24. Oktober 2018 um 11:00 Uhr


  • @IhorBurlachenko Als ich Ihre Lösung müde machte, bekam ich diesen Fehler Nicht erfasster Fehler: Invarianter Verstoß: Elementtyp ist ungültig: String (für integrierte Komponenten) oder Klasse/Funktion erwartet, aber Objekt erhalten. könntest du mir hier helfen?

    – ThinkAndCode

    8. November 2018 um 11:03 Uhr

  • Jeder, der Probleme mit diesem Ansatz hat, stellt bitte sicher, dass Sie die neueste Version von installieren react-native-svg Paket. Stellen Sie außerdem sicher, dass Sie diesen Befehl ausführen, um Ihr Paket zu verknüpfen react-native link react-native-svg

    – connect2Coder

    17. April 2019 um 20:26 Uhr


  • Dies ist ein langer Prozess, um SVG-Dateien zu implementieren, besser zu verwenden github.com/kristerkari/react-native-svg-transformer wie unter stackoverflow.com/a/55604442/1854104 vorgeschlagen

    – hefgi

    14. August 2019 um 9:08 Uhr

Benutzer-Avatar
Cassio Seffrin

Ich habe gepostet eine andere Lösung (react-native-vector-icons) hier. Dieser Ansatz verwendet eine Vektorschriftart (von SVG) anstelle einer SVG-Datei. PS: React-Native-Vector-Icons ist der beste Ansatz, um mit SVG in React-Native umzugehen, es funktioniert auch in iOS und Android. Sie können die Farbe und Größe Ihres Vektorsymbols ändern.

Wenn Sie ein SVG direkt in Ihre App einfügen möchten, können Sie eine Bibliothek eines Drittanbieters ausprobieren: „react-native-svg“. Mit mehr als 3.000 Sternen in Github ist dies einer der besten Ansätze.

Installieren Sie eines davon mit npm:

Dann verknüpfen Sie es mit native using

react-native link react-native-svg

Ein Beispiel mit react-native-svg-uri:

import * as React from 'react';
import SvgUri from 'react-native-svg-uri'; // SVG Package
import testSvg from './test.svg';          // SVG File

export default () => (
  <SvgUri
    width="200"
    height="200"
    svgXmlData={testSvg}
  />
);

  • Es gibt einen Fehler “ein untergeordnetes Element, das keinen CSS-Knoten hat, kann nicht zu einem Knoten ohne Maßfunktion hinzugefügt werden”.

    – Pulkit Aggarwal

    31. Januar 2018 um 9:15 Uhr

  • Sehen Sie sich die Antwort an, die ich hier poste, und verwenden Sie eine Schriftart anstelle eines SVG. es ist eine bessere Lösung: stackoverflow.com/questions/49951885/…

    – Cassio Seffrin

    21. April 2018 um 3:25 Uhr

  • Diese Bibliothek ist so langsam. Es hüllt jedes SVG in eine eigene Webansicht ein.

    – JP_

    4. Januar 2019 um 2:46 Uhr

  • tnx, das war die schnellste Lösung, aber anstelle von svgXmlData={testSvg} habe ich source={testSvg} verwendet wie ein Zauber. tnx nochmal.

    – Andris Laduzans

    6. Mai 2020 um 9:06 Uhr

  • @Omarbakhsh Ich würde Ihnen empfehlen, dies zu versuchen stackoverflow.com/questions/49951885/…

    – Cassio Seffrin

    13. August 2020 um 12:01 Uhr


Benutzer-Avatar
AndroConsis

Installieren reagieren-native-svg-transformator

npm ich reagiere-native-svg-transformer –save-dev

Ich verwende SVG wie folgt und es funktioniert gut

import LOGOSVG from "assets/svg/logo.svg"

im rendern

<View>
  <LOGOSVG 
    width="100%"
    height="70%"
  />
</View>

  • Wenn ich die SVG-Datei HEARTSVG aus dem Bildordner importiere, wird ein Fehler angezeigt. Und kein Fehler beim Importieren von PNG-Dateien. Irgendein Vorschlag?

    – Rakesch

    27. Oktober 2020 um 14:13 Uhr

Ich habe alle oben genannten Lösungen und andere Lösungen außerhalb des Stacks ausprobiert und keine davon hat für mich funktioniert. Endlich habe ich nach langer Recherche eine Lösung für mein Messeprojekt gefunden.

Wenn Sie es benötigen, um in expo zu arbeiten, könnte eine Problemumgehung darin bestehen, es zu verwenden https://react-svgr.com/playground/ und verschieben Sie die Verteilung von Requisiten wie folgt auf ein G-Element anstelle des SVG-Stamms:

import * as React from 'react';
import Svg, { G, Path } from 'react-native-svg';

function SvgComponent(props) {
  return (
    <Svg viewBox="0 0 511 511">
      <G {...props}>
        <Path d="M131.5 96c-11.537 0-21.955 8.129-29.336 22.891C95.61 132 92 149.263 92 167.5s3.61 35.5 10.164 48.609C109.545 230.871 119.964 239 131.5 239s21.955-8.129 29.336-22.891C167.39 203 171 185.737 171 167.5s-3.61-35.5-10.164-48.609C153.455 104.129 143.037 96 131.5 96zm15.92 113.401C142.78 218.679 136.978 224 131.5 224s-11.28-5.321-15.919-14.599C110.048 198.334 107 183.453 107 167.5s3.047-30.834 8.581-41.901C120.22 116.321 126.022 111 131.5 111s11.28 5.321 15.919 14.599C152.953 136.666 156 151.547 156 167.5s-3.047 30.834-8.58 41.901z" />
        <Path d="M474.852 158.011c-1.263-40.427-10.58-78.216-26.555-107.262C430.298 18.023 405.865 0 379.5 0h-248c-26.365 0-50.798 18.023-68.797 50.749C45.484 82.057 36 123.52 36 167.5s9.483 85.443 26.703 116.751C80.702 316.977 105.135 335 131.5 335a57.57 57.57 0 005.867-.312 7.51 7.51 0 002.133.312h48a7.5 7.5 0 000-15h-16c10.686-8.524 20.436-20.547 28.797-35.749 4.423-8.041 8.331-16.756 11.703-26.007V503.5a7.501 7.501 0 0011.569 6.3l20.704-13.373 20.716 13.374a7.498 7.498 0 008.134 0l20.729-13.376 20.729 13.376a7.49 7.49 0 004.066 1.198c1.416 0 2.832-.4 4.07-1.2l20.699-13.372 20.726 13.374a7.5 7.5 0 008.133 0l20.732-13.377 20.738 13.377a7.5 7.5 0 008.126.003l20.783-13.385 20.783 13.385a7.5 7.5 0 0011.561-6.305v-344a7.377 7.377 0 00-.146-1.488zM187.154 277.023C171.911 304.737 152.146 320 131.5 320s-40.411-15.263-55.654-42.977C59.824 247.891 51 208.995 51 167.5s8.824-80.391 24.846-109.523C91.09 30.263 110.854 15 131.5 15s40.411 15.263 55.654 42.977C203.176 87.109 212 126.005 212 167.5s-8.824 80.391-24.846 109.523zm259.563 204.171a7.5 7.5 0 00-8.122 0l-20.78 13.383-20.742-13.38a7.5 7.5 0 00-8.131 0l-20.732 13.376-20.729-13.376a7.497 7.497 0 00-8.136.002l-20.699 13.373-20.727-13.375a7.498 7.498 0 00-8.133 0l-20.728 13.375-20.718-13.375a7.499 7.499 0 00-8.137.001L227 489.728V271h8.5a7.5 7.5 0 000-15H227v-96.5c0-.521-.054-1.03-.155-1.521-1.267-40.416-10.577-78.192-26.548-107.231C191.936 35.547 182.186 23.524 171.5 15h208c20.646 0 40.411 15.263 55.654 42.977C451.176 87.109 460 126.005 460 167.5V256h-.5a7.5 7.5 0 000 15h.5v218.749l-13.283-8.555z" />
        <Path d="M283.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM331.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM379.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM427.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15z" />
      </G>
    </Svg>
  );
}

export default function App() {
  return (
    <SvgComponent width="100%" height="100%" strokeWidth={5} stroke="black" />
  );
}

Benutzer-Avatar
Amir Khorsandi

Nachdem ich viele Möglichkeiten und Bibliotheken ausprobiert hatte, entschied ich mich, eine neue Schriftart (mit Glyphen oder dieses Lernprogramm) und füge meine SVG-Dateien hinzu und verwende dann die Komponente “Text” mit meiner benutzerdefinierten Schriftart.

Hoffe, das hilft jedem, der das gleiche Problem mit SVG in React-Native hat.

  • Ich denke, Sie haben Recht, eine Schriftfamilie ist wahrscheinlich der einfachste Weg, um einfache SVGs in React Native zu bringen

    – Joe Lloyd

    24. November 2017 um 7:57 Uhr

  • Schönes Tutorial zu diesem Thema: blog.bam.tech/developper-news/…. Benötigt die Vektor-Icons Node-Paket.

    – Rafa Viotti

    13. Februar 2018 um 23:18 Uhr

  • Diese Lösung ist nicht gültig, wenn Sie eine mehrfarbige Durchhangdatei importieren müssen

    – Joe Aspara

    15. April 2018 um 22:33 Uhr

  • Ich habe die Lösung mit icomoon ausprobiert und es hat weder geklappt noch ist ihr Support aktiv. Und Fontello ändert meine SVGs.

    – Siraj Alam

    27. September 2018 um 17:16 Uhr

Benutzer-Avatar
Vasanth Saravanan

Sie können dies auf einfache Weise tun

Zuerst sollten Sie die Installation vornehmen,

  1. npm install -s respond-native-svg
  2. reagieren-native link reagieren-native-svg
  3. npm install -s respond-native-svg-transformer

dann sollten Sie den folgenden Code in Ihre metro.config.js-Datei einfügen

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

Danach sollten Sie eine neue Datei in Ihrem Stammverzeichnis mit dem Namen Declarations.d.js mit dem folgenden Code erstellen

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

Schließlich ist dies eine Importmethode

import USER from "../../assets/icons/user.svg"

und das ist für jsx

<USER width="100%" height="100%"/>

  • Ich denke, Sie haben Recht, eine Schriftfamilie ist wahrscheinlich der einfachste Weg, um einfache SVGs in React Native zu bringen

    – Joe Lloyd

    24. November 2017 um 7:57 Uhr

  • Schönes Tutorial zu diesem Thema: blog.bam.tech/developper-news/…. Benötigt die Vektor-Icons Node-Paket.

    – Rafa Viotti

    13. Februar 2018 um 23:18 Uhr

  • Diese Lösung ist nicht gültig, wenn Sie eine mehrfarbige Durchhangdatei importieren müssen

    – Joe Aspara

    15. April 2018 um 22:33 Uhr

  • Ich habe die Lösung mit icomoon ausprobiert und es hat weder geklappt noch ist ihr Support aktiv. Und Fontello ändert meine SVGs.

    – Siraj Alam

    27. September 2018 um 17:16 Uhr

Benutzer-Avatar
Kshama Jain

SVG wird in nativen Anwendungen nicht direkt unterstützt. Um diese anzuzeigen, müssen wir auf Module von Drittanbietern zurückgreifen

Bitte befolgen Sie diese Schritte

Schritt 1. Installieren reagieren-native-svg und reagieren-native-svg-transformator

npm i react-native-svg react-native-svg-transformer

Schritt 2. Datei hinzufügen metro.config.js wenn es nicht existiert

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

Schritt 3. Verwenden Sie die SVG-Datei wie eine React-Komponente

import Invest from '../assets/invest.svg'; // import SVG

return (
        <View>
            <Invest /> // Use SVG as component
        </View>
    )

  • Toll, was du teilst, aber das ist mir klar reagieren-native-svg-transformator müssen als dev-Abhängigkeiten installiert werden, also wie Sie installieren: Zuerst: yarn add react-native-svg oder npm i --save react-native-svg und dann: yarn add react-native-svg-transformer -D oder npm i --dev react-native-svg-transformer.

    – Micessien

    21. Juli 2021 um 18:03 Uhr


1283510cookie-checkWie zeige ich eine SVG-Datei auf React Native an?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy