react native svg

react-native-svg fournit une prise en charge SVG pour React Native sur iOS, Android, MacOS, Windows et une couche de compatibilité pour le Web.

Consultez l'exemple d'application

• Caractéristiques
• Installation
• Dépannage
• Problèmes d'ouverture
• Usage
• Problèmes connus

Caractéristiques

1. Prend en charge la plupart des éléments et propriétés SVG (rect, cercle, ligne, polyligne, polygone, g ...).
2. Facile à convertir le code SVG en réactif-natif-SVG.

Installation

Avec expo

✅ L'application EXPO Client est livrée avec le code natif installé!

Installez le javascript avec:

npx expo install react-native-svg

Consultez les documents Expo pour plus d'informations ou passez à l'utilisation.

Avec réactif-natif-Cli

1. Installer la bibliothèque

   de NPM

   npm install react-native-svg

   du fil

   yarn add react-native-svg

2. Lier le code natif

    cd ios && pod install

Versions réagites prises en charge

react-native-svg	réactif natif
3.2.0	0,29
4.2.0	0,32
4.3.0	0,33
4.4.0	0,38
4.5.0	0,40
5.1.8	0,44
5.2.0	0,45
5.3.0	0,46
5.4.1	0,47
5.5.1	> = 0,50
> = 6	> = 0,50
> = 7	> = 0,57,4
> = 8	> = 0,57,4
> = 9	> = 0,57,4
> = 12.3.0	> = 0,64,0
> = 15.0.0	> = 0,70,0
> = 15.8.0	> = 0,73,0

Support au tissu

Le tissu est le nouveau système de rendu de React Native. À partir de la version 13.0.0 de ce projet, le tissu est pris en charge uniquement pour React-Native 0,69.0+. La prise en charge des versions antérieures n'est pas possible en raison de la rupture des changements de configuration.

react-native-svg	réactif natif
> = 13.0.0	0,69,0+
> = 13.6.0	0,70,0+
> = 13.10.0	0,72,0+

Dépannage

Comportement inattendu

Si vous avez un comportement inattendu, veuillez créer un projet propre avec les dernières versions de React-Native et React-Native-SVG

react-native init CleanProject
cd CleanProject/
yarn add react-native-svg
cd ios && pod install && cd ..

Faire une reproduction du problème dans App.js

react-native run-ios
react-native run-android

Ajout de la prise en charge de Windows

1. npx react-native-windows-init --overwrite
2. react-native run-windows

Problèmes d'ouverture

Vérifiez qu'il s'agit toujours d'un problème avec la dernière version comme spécifié à l'étape précédente. Dans l'affirmative, ouvrez un nouveau problème, incluez l'intégralité du fichier App.js , spécifiez les plates-formes que vous avez testées et les résultats de l'exécution de cette commande:

react-native info

Si vous soupçonnez que vous avez trouvé un bogue de conformité spécifiques, vous pouvez tester votre composant dans un projet React-Native-Web en fournissant cette boîte de codes et boîte, pour voir comment les différents navigateurs rendent le même contenu: https://codesandbox.io / S / PYPN6MN3Y7 Si un navigateur à feuilles persistants avec une base d'utilisateurs importante ou un autre agent utilisateur SVG rend mieux un contenu SVG, ou prend en charge davantage de SVG et des spécifications connexes, veuillez ouvrir un problème dès que possible.

Usage

Pour vérifier comment utiliser la bibliothèque, voir usage.md

Problèmes connus:

1. Impossible d'appliquer le point de mise au point de radialgradient sur Android.

React Native SVG est maintenu par Software Mansion

Depuis 2012 Software Mansion est une agence de logiciels ayant une expérience dans la création d'applications Web et mobiles. Nous sommes des contributeurs et des experts natifs de REACT de Core dans le traitement de toutes sortes de problèmes autochtones React. Nous pouvons vous aider à construire votre prochain produit de rêve - nous embaucher.