Wie zeige ich eine SVG-Datei auf React Native?

Ich möchte SVG-Dateien anzeigen (ich habe eine Reihe von SVG-Bildern), aber das, was ich nicht zeigen konnte. Ich habe versucht, Image and Use- Komponenten von react-native-svg zu verwenden, aber damit funktionieren 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 der React Native SVG im Grunde nicht unterstützt, aber ich denke, jemand hat dieses Problem auf knifflige Weise behoben (mit / ohne React-Native-SVG).

Ich habe die folgende Lösung verwendet:

1. Konvertieren Sie das .svgBild mit https://svg2jsx.herokuapp.com/ in JSX.
2. Konvertieren Sie die JSX- react-native-svgKomponente mit https://svgr.now.sh/ in eine Komponente (aktivieren Sie das Kontrollkästchen "Native reagieren").

Ich habe hier eine andere Lösung veröffentlicht. Dies ist der beste Ansatz zum Einfügen eines Vektordiagramms (svg) in eine native Reaktionsanwendung . Bei diesem Ansatz wird eine Vektorschrift (aus svg) anstelle einer svg-Datei verwendet. PS: Es funktioniert hervorragend in iOS und Android, und Sie können auch die Farbe und Größe Ihres Vektorsymbols ändern.

Wenn Sie eine SVG-Datei 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:
  • npm ich reagiere-native-svg
  • npm ich reagiere-native-svg-uri
• verknüpfe das mit native:
  • React-Native Link React-Native-SVG

Und hier ist ein Beispiel:

import * as React from 'react';
import SvgUri from 'react-native-svg-uri';
import testSvg from './test.svg';
export default () => (
  <SvgUri
    width="200"
    height="200"
    svgXmlData={testSvg}
  />
);

Nachdem ich viele Möglichkeiten und Bibliotheken ausprobiert hatte, entschied ich mich, eine neue Schriftart (mit Glyphen oder diesem Tutorial ) zu erstellen , meine SVG-Dateien hinzuzufügen und dann die Komponente "Text" mit meiner benutzerdefinierten Schriftart zu verwenden.

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

Installieren Sie den React-Native-SVG-Transformator

npm ich reagiere-native-svg-transformator --save-dev

Ich benutze SVG wie folgt und es funktioniert gut

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

in rendern

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

Ich hatte das gleiche Problem. Ich verwende diese Lösung, die ich gefunden habe: Reagiere native Anzeige-SVG aus einer Datei

Es ist nicht perfekt und ich besuche es heute noch einmal, weil es unter Android viel schlechter abschneidet.

Verwenden Sie https://github.com/kristerkari/react-native-svg-transformer

In diesem Paket wird erwähnt, dass .svgDateien in React Native v0.57 und niedriger nicht unterstützt werden. Verwenden Sie daher die .svgxErweiterung für SVG-Dateien.

Verwenden Sie für Web oder React-Native-Web https://www.npmjs.com/package/@svgr/webpack

Um SVG-Dateien react-native-svg-urimit der reaktionsnativen Version 0.57 und niedriger zu rendern , müssen Sie Ihrem Stammprojekt die folgenden Dateien hinzufügen

Hinweis: Ändern Sie die Erweiterung svginsvgx

Schritt 1: Datei transformer.jszum Stammverzeichnis des Projekts hinzufügen

// file: transformer.js

const cleanupSvg = require('./cleanup-svg');

const upstreamTransformer = require("metro/src/transformer");

// const typescriptTransformer = require("react-native-typescript-transformer");
// const typescriptExtensions = ["ts", "tsx"];

const svgExtensions = ["svgx"]

// function cleanUpSvg(text) {
//   text = text.replace(/width="([#0-9]+)px"/gi, "");
//    text = text.replace(/height="([#0-9]+)px"/gi, "");
//    return text;
// }

function fixRenderingBugs(content) {
  // content = cleanUpSvg(content); // cleanupSvg removes width and height attributes from svg
  return "module.exports = `" + content + "`";
}


module.exports.transform = function ({ src, filename, options }) {
  // if (typescriptExtensions.some(ext => filename.endsWith("." + ext))) {
  //  return typescriptTransformer.transform({ src, filename, options })
  // }

  if (svgExtensions.some(ext => filename.endsWith("." + ext))) {
    return upstreamTransformer.transform({
      src: fixRenderingBugs(src),
      filename,
      options
    })
  }

  return upstreamTransformer.transform({ src, filename, options });
}

Schritt 2: rn-cli.config.jsZum Stammverzeichnis des Projekts hinzufügen

module.exports = {
    getTransformModulePath() {
      return require.resolve("./transformer");
    },
    getSourceExts() {
      return [/* "ts", "tsx", */ "svgx"];
    }
  };

Die oben genannten Lösungen funktionieren auch in Produktions-Apps ✅

Hinweis: Svg funktioniert nicht für Android-Release-Versionen, berücksichtigen Sie es also nicht für Android. Es funktioniert für Android nur im Debug-Modus. Aber es funktioniert gut für ios.

Verwenden Sie https://github.com/vault-development/react-native-svg-uri

Installieren

npm install react-native-svg-uri --save
react-native link react-native-svg # not react-native-svg-uri

Verwendung

import SvgUri from 'react-native-svg-uri';


<SvgUri source={require('./path_to_image/image.svg')} />

Ich habe alle oben genannten Lösungen und andere Lösungen außerhalb des Stapels ausprobiert und keine für mich gearbeitet. Nach langer Recherche habe ich endlich eine Lösung für mein Ausstellungsprojekt gefunden.

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

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

Ich benutze diese beiden Plugins,

1. [react-native-svg] https://github.com/react-native-community/react-native-svg )
2. [React-Native-SVG-Transformator] https://github.com/kristerkari/react-native-svg-transformer )

Zunächst müssen Sie dieses Plugin installieren. Danach müssen Sie Ihre metro.config.js mit diesem Code ändern.

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

Für weitere Informationen können Sie diesen Link besuchen

• https://medium.com/game-development-stuff/how-to-import-svgs-on-react-native-dc76b56403ba
• https://medium.com/@majirosstefan/the-svgs-inside-react-native-0-61-5-and-storybook-566bcd43ba94

Alle diese Lösungen sind absolut schrecklich. Konvertieren Sie einfach Ihr SVG in ein PNG und verwenden Sie die Vanille- <Image/>Komponente. Die Tatsache, dass React-Native SVG-Bilder in der ImageKomponente immer noch nicht unterstützt, ist ein Witz. Sie sollten niemals eine zusätzliche Bibliothek für eine so einfache Aufgabe installieren. Verwenden Sie https://svgtopng.com/