Comment afficher un fichier SVG sur Réagir Natif?

Question

J'en veux pour preuve les fichiers svg (j'ai des tas d'images svg) mais la chose que je ne pouvais pas trouver le moyen de le montrer. J'ai essayé d'utiliser l'Image et l'Utilisation de composants de réagir-native-svg mais ils ne fonctionnent pas avec qui. Et j'ai essayé de le faire avec le natif de sens, mais c'est vraiment difficile de montrer 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>

Je sais aussi que l'réagissent maternelle n'est pas le support du svg essentiellement, mais je pense que quelqu'un a résolu ce problème avec la façon délicate (avec/sans réagir-native-svg)

Answer 1

J'ai utilisé la solution suivante:

1. Convertir des .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 à cocher)

Answer 2

J'ai posté une autre solution ici Comment puis-je insérer une image au format svg dans un reactnative application, 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 voulez essayer d'insérer une svg directement dans votre application, vous pouvez essayer de réagir-native-à distance-svg, cette approche ont quelques problèmes avec android https://github.com/seekshiva/react-native-remote-svg

installer la lib: fil ajouter réagir-native-à distance-svg, l'importation de votre écran:

import Image from 'react-native-remote-svg'

et l'utilisation

 <View>
    <Image source={require('./money.svg')} />
</View>

Answer 3

Après avoir essayé de nombreuses façons et des bibliothèques, j'ai décidé de créer une nouvelle police de caractères (avec des Glyphes ou de ce tutoriel) et ajouter mes fichiers SVG, puis utilisez le "Texte" de la composante avec ma police personnalisée.

Espérons que cela aide quelqu'un qui a le même problème avec SVG dans réagissent-natif.

Answer 4

J'ai eu le même problème. Je suis à l'aide de cette solution que j'ai trouvé: Réagir Natif d'affichage à partir d'un fichier SVG

Il n'est pas parfait, et je suis revisiter aujourd'hui, car il effectue une aggravation de la situation sur Android.