react native svg

react-native-svg menyediakan dukungan SVG untuk bereaksi asli di iOS, android, macOS, windows, dan lapisan kompatibilitas untuk web.

Lihat contoh aplikasi

• Fitur
• Instalasi
• Pemecahan masalah
• Masalah pembukaan
• Penggunaan
• Masalah yang diketahui

Fitur

1. Mendukung sebagian besar elemen dan sifat SVG (Rect, Circle, Line, Polyline, Polygon, G ...).
2. Mudah mengonversi kode SVG menjadi reaksi-asli-SVG.

Instalasi

Dengan Expo

✅ Aplikasi klien Expo dilengkapi dengan kode asli yang diinstal!

Instal JavaScript dengan:

npx expo install react-native-svg

Lihat Expo Docs untuk info lebih lanjut atau lompat ke depan untuk digunakan.

Dengan react-native-cli

1. Instal Perpustakaan

   dari NPM

   npm install react-native-svg

   dari benang

   yarn add react-native-svg

2. Tautan kode asli

    cd ios && pod install

Versi reaksi asli yang didukung

react-native-svg	reaksi-asli
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

Dukungan untuk kain

Kain adalah sistem rendering baru yang bereaksi. Pada versi 13.0.0 dari proyek ini, Fabric hanya didukung untuk react-native 0.69.0+. Dukungan untuk versi sebelumnya tidak dimungkinkan karena memecah perubahan dalam konfigurasi.

react-native-svg	reaksi-asli
> = 13.0.0	0.69.0+
> = 13.6.0	0.70.0+
> = 13.10.0	0.72.0+

Pemecahan masalah

Perilaku yang tidak terduga

Jika Anda memiliki perilaku yang tidak terduga, silakan buat proyek bersih dengan versi terbaru dari reaksi-asli dan reaksi-asli-SVG

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

Buat reproduksi masalah di App.js

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

Menambahkan Dukungan Windows

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

Masalah pembukaan

Pastikan itu masih menjadi masalah dengan versi terbaru sebagaimana ditentukan pada langkah sebelumnya. Jika demikian, buka masalah baru, sertakan seluruh file App.js , tentukan platform apa yang telah Anda uji, dan hasil menjalankan perintah ini:

react-native info

Jika Anda curiga bahwa Anda telah menemukan bug kesesuaian spesifikasi, maka Anda dapat menguji menggunakan komponen Anda dalam proyek reaksi-native-web dengan forking codesandbox ini, untuk melihat bagaimana browser yang berbeda membuat konten yang sama: https://codesandbox.io /s/pypn6mn3y7 Jika ada browser evergreen dengan basis pengguna yang signifikan atau agen pengguna SVG lainnya membuat beberapa konten SVG lebih baik, atau mendukung lebih banyak spesifikasi SVG dan terkait, buka masalah secepatnya.

Penggunaan

Untuk memeriksa cara menggunakan perpustakaan, lihat penggunaan.md

Masalah yang Diketahui:

1. Tidak dapat menerapkan titik fokus RadialGradient pada Android.

Bereaksi SVG asli dipertahankan oleh mansion perangkat lunak

Karena 2012 Software Mansion adalah agen perangkat lunak dengan pengalaman dalam membangun aplikasi web dan seluler. Kami adalah kontributor dan ahli inti React Native dalam menangani semua jenis masalah asli yang bereaksi. Kami dapat membantu Anda membangun produk impian berikutnya - sewa kami.