react native svg

react-native-svg bietet SVG-Unterstützung für den Reagieren von nativem auf iOS, Android, MacOS, Windows und einer Kompatibilitätsschicht für das Web.

Schauen Sie sich die Beispiel -App an

• Merkmale
• Installation
• Fehlerbehebung
• Eröffnungsprobleme
• Verwendung
• Bekannte Probleme

Merkmale

1. Unterstützt die meisten SVG -Elemente und Eigenschaften (rekt, Kreis, Linie, Polylinie, Polygon, G ...).
2. Einfach SVG-Code in React-Native-SVG konvertieren.

Installation

Mit Expo

✅ Die Expo -Client -App wird mit dem nativen Code installiert!

Installieren Sie das JavaScript mit:

npx expo install react-native-svg

Weitere Informationen finden Sie in den Expo -Dokumenten oder wechseln Sie im Voraus zur Nutzung.

Mit React-nativ-cli

1. Bibliothek installieren

   von npm

   npm install react-native-svg

   aus Garn

   yarn add react-native-svg

2. Link Native Code

    cd ios && pod install

Unterstützte React-native Versionen

React-nativ-svg	reagieren nativ
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

Unterstützung für Stoff

Fabric ist das neue Rendering -System von React Native. Ab Version 13.0.0 dieses Projekts wird Fabric nur für React-native 0,69,0+ unterstützt. Die Unterstützung früherer Versionen ist aufgrund von Veränderungen der Konfiguration nicht möglich.

React-nativ-svg	reagieren nativ
> = 13.0.0	0,69,0+
> = 13.6.0	0,70,0+
> = 13.10.0	0,72,0+

Fehlerbehebung

Unerwartetes Verhalten

Wenn Sie ein unerwartetes Verhalten haben, erstellen Sie bitte ein sauberes Projekt mit den neuesten Versionen von React-Native und React-Native-SVG

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

Machen Sie eine Reproduktion des Problems in App.js

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

Hinzufügen von Windows -Unterstützung

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

Eröffnungsprobleme

Stellen Sie sicher, dass es sich immer noch um ein Problem mit der neuesten Version handelt, wie im vorherigen Schritt angegeben. Wenn ja, öffnen Sie ein neues Problem, geben Sie die gesamte App.js -Datei an, geben Sie an, welche Plattformen Sie getestet haben, und die Ergebnisse des Ausführens dieses Befehls:

react-native info

Wenn Sie den Verdacht haben, dass Sie einen Spezifikationskonformitätsfehler gefunden haben, können Sie Ihre Komponente in einem React-Native-Web-Projekt mit dieser Codesandbox testen, um zu sehen, wie unterschiedliche Browser den gleichen Inhalt rendern: https://codesandbox.io /S/PYPN6MN3Y7 Wenn ein Evergreen -Browser mit erheblicher Benutzerbasis oder anderen SVG -Benutzeragenten einen SVG -Inhalt besser macht oder mehr von SVG und zugehörigen Spezifikationen unterstützt, öffnen Sie bitte ein Problem so schnell wie möglich.

Verwendung

Um zu überprüfen, wie Sie die Bibliothek verwenden, siehe useage.md

Bekannte Probleme:

1. Der Fokusspunkt von Radialgradient auf Android kann nicht angewendet werden.

React Native SVG wird durch Software -Villa aufrechterhalten

Seit 2012 ist Software Mansion eine Softwareagentur mit Erfahrung im Erstellen von Web- und mobilen Apps. Wir sind Kernreaktoren für native Mitwirkende und Experten im Umgang mit allen Arten von reagierenden Problemen. Wir können Ihnen helfen, Ihr nächstes Traumprodukt aufzubauen - uns einstellen.