web-dev-qa-db-fra.com

Comment afficher un fichier SVG sur React Native?

Je veux montrer des fichiers svg (j'ai un tas d'images svg) mais la chose que je ne pouvais pas trouver le moyen de montrer. J'ai essayé d'utiliser Image et Utiliser des composants de react-native-svg mais ils ne fonctionnent pas avec ça. Et j'ai essayé de le faire de manière native, mais c'est vraiment difficile de montrer une image svg.

Exemple de code:

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

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

De plus, je sais que le natif de réaction ne prend pas fondamentalement en charge svg mais je pense que quelqu'un a résolu ce problème de manière délicate (avec/sans react-native-svg)

javascriptsvgreact-native
60
the_bluescreen

J'ai utilisé la solution suivante:

  1. Convertissez une image .svg en JSX avec https://svg2jsx.herokuapp.com/
  2. Convertissez le composant JSX en composant react-native-svg avec https://svgr.now.sh/ (cochez la case "Réagir natif").
26
Ihor Burlachenko

Après avoir essayé beaucoup de façons et de bibliothèques, j’ai décidé de créer une nouvelle police (avec Glyphs ou this tutorial ) et d’y ajouter mes fichiers SVG, puis d’utiliser le composant "Texte" avec mon police personnalisée.

J'espère que cela aidera tous ceux qui ont le même problème avec SVG à réagir en natif.

7
Amir Khorsandi

J'ai posté une autre solution ici Quelle est la meilleure approche pour insérer un graphique vectoriel (svg) dans une application native native , Cette approche utilise une police de vecteur (à partir de svg) à la place d'un fichier svg. PS: Il fonctionne très bien sous iOS et Android et vous pouvez également modifier la couleur et la taille de votre icône de vecteur.

Si vous souhaitez insérer un svg directement dans votre application, vous pouvez essayer une bibliothèque tierce: react-native-svg. Avec plus de 3k étoiles dans github, c'est l'une des meilleures approches.

  • installer:
    • npm je réagis-natif-svg
    • npm je réagis-natif-svg-uri
  • lier le à natif:
    • lien réactif natif réactif-natif-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}
  />
);
6
Cassio Seffrin

J'ai eu le même problème. J'utilise cette solution que j'ai trouvée: React Native affiche le SVG depuis un fichier

Ce n'est pas parfait, et je le revisite aujourd'hui, car les performances sont bien pires sous Android.

3
Sledge Hammer

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

Dans ce package, il est mentionné que les fichiers .svg ne sont pas pris en charge dans React Native v0.57 et versions antérieures; utilisez donc l'extension .svgx pour les fichiers svg.

Pour un usage Web ou réactif-natif-Web https://www.npmjs.com/package/@svgr/webpack

Pour restituer des fichiers svg à l'aide de react-native-svg-uri avec une version 0.57 et antérieure de natif, vous devez ajouter les fichiers suivants à votre projet racine

Remarque: remplacez l'extension svg par svgx

étape 1: ajouter le 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: ajoutez rn-cli.config.js à la racine du projet

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

Les solutions susmentionnées fonctionneront également dans les applications de production.

1
Aravind Vemula

Remarque: Svg ne fonctionne pas pour les versions de Android, vous ne devez donc pas l'utiliser pour Android. Cela fonctionnera pour Android en mode débogage uniquement. Mais cela fonctionne bien pour iOS.

Utilisez 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

Usage

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


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