Comment afficher un fichier SVG sur Réagir Natif?

J'ai utilisé la solution suivante:

1. Convertir .image svg à JSX avec https://svg2jsx.herokuapp.com/
2. Convertir le JSX pour react-native-svg composant avec https://svgr.now.sh/ (cocher la case "Réagir Natif case)

J'ai posté une autre solution ici Quelle est la meilleure approche pour insérer un vectoriel (svg) graphique dans un réagir application native, Cette approche de l'utilisation d'un vecteur de police(à partir de svg) au lieu d'un fichier svg. PS: Sa fonctionne très bien sous ios et android, et vous pouvez également changer la couleur et la taille de votre icône de vecteur de.

Si vous souhaitez insérer un svg directement dans votre application, vous pouvez essayer une 3ème partie de la bibliothèque : réagir-native-svg. Avec plus de 3k étoiles sur github, c'est l'un de la meilleure approche.

• installer:
  • mnp je réagis-native-svg
  • mnp je réagis-native-svg-uri
• lien le natif:
  • réagir indigènes lien réagir-native-svg

Et voici un échantillon:

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

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

Dans ce package, il est mentionné que .svg fichiers ne sont pas pris en charge dans Réagissent Natif v0.57 et faible, de sorte que l'utilisation .svgx extension pour les fichiers svg.

Pour le web ou de réagir de langue maternelle de l'utilisation du web https://www.npmjs.com/package/@svgr/webpack

---

Pour rendre les fichiers svg en utilisant react-native-svg-uri avec réagissent-version native de 0,57 et inférieur, vous devez ajouter les fichiers suivants dans le répertoire racine de votre projet

Remarque: le changement de l'extension de svg à svgx

étape 1: ajouter un fichier transformer.js à la racine du projet

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

étape 2: ajouter rn-cli.config.js à la racine du projet

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

Les solutions mentionnées ci-dessus va travailler à la production des applications trop ✅

Remarque: Svg ne fonctionne pas pour android versions afin de ne pas envisager pour android. Il va travailler pour android en mode débogage seulement. Mais il fonctionne très bien pour ios.

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

Installer

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

Utilisation

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


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