Comment afficher le fichier SVG sur React Native?

Je veux afficher des fichiers svg (j'ai un tas d'images svg) mais je n'ai pas trouvé le moyen de le montrer. J'ai essayé d'utiliser les composants Image et Use 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 juste 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 en charge le svg, mais je pense que quelqu'un a résolu ce problème de manière délicate (avec / sans react-native-svg)

J'ai utilisé la solution suivante:

1. Convertir l' .svgimage en JSX avec https://svg2jsx.herokuapp.com/
2. Convertissez le JSX en react-native-svgcomposant avec https://svgr.now.sh/ (cochez la case "React Native)

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

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
• liez le au natif:
  • React-Native Link React-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}
  />
);

Après avoir essayé de nombreuses méthodes et bibliothèques, j'ai décidé de créer une nouvelle police (avec des glyphes ou ce tutoriel ) et d'y ajouter mes fichiers SVG, puis d'utiliser le composant "Texte" avec ma police personnalisée.

J'espère que cela aidera quiconque a le même problème avec SVG en React-Native.

Installez react-native-svg-transformer

npm je réagis-native-svg-transformer --save-dev

J'utilise SVG comme suit et cela fonctionne bien

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

en rendu

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

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

Ce n'est pas parfait, et je revisite aujourd'hui, car il fonctionne bien moins bien sur Android.

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

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

Pour le Web ou React-Native-Web, utilisez https://www.npmjs.com/package/@svgr/webpack

Pour rendre les fichiers svg à l'aide react-native-svg-uride la version 0.57 et inférieure de react-native, vous devez ajouter les fichiers suivants à votre projet racine

Remarque: remplacez l'extension svgparsvgx

é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 fonctionneront également dans les applications de production ✅

J'ai essayé toutes les solutions ci-dessus et d'autres solutions en dehors de la pile et aucune ne fonctionne pour moi. enfin, après de longues recherches, j'ai trouvé une solution pour mon projet d'expo.

Si vous en avez besoin pour fonctionner dans expo, une solution de contournement pourrait être d'utiliser https://react-svgr.com/playground/ et de déplacer la répartition des accessoires vers un élément G au lieu de la racine SVG comme ceci:

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

Remarque: Svg ne fonctionne pas pour les versions Android, donc ne considérez pas 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')} />

J'utilise ces deux plugins,

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

Tout d'abord, vous devez installer ce plugin. Après cela, vous devez changer votre metro.config.js, avec ce code.

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

Pour plus de détails, vous pouvez visiter ce lien

• 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

vous pouvez convertir n'importe quel SVG en composant et le rendre réutilisable.

voici ma réponse pour la façon la plus simple de le faire

SVG vers composant

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

export default function Splash() {
  return (
    <View style={styles.container}>
      {/* provided the svg file is stored locally */}
      <SvgUri
        width="400"
        height="200"
        source={require('./logo.svg')}
      />
      {/* if the svg is online */}
      <SvgUri
        width="200"
        height="200"
        source={{ uri: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg' }}
      />

      <Text style={styles.logoText}>
        Text
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logoText: {
    fontSize: 50
  }
});

Toutes ces solutions sont absolument horribles. Convertissez simplement votre SVG en PNG et utilisez le <Image/>composant vanilla . Le fait que react-native ne supporte toujours pas les images SVG dans le Imagecomposant est une blague. Vous ne devez jamais installer une bibliothèque supplémentaire pour une tâche aussi simple. Utilisez https://svgtopng.com/