react native svg

react-native-svg ให้การสนับสนุน SVG เพื่อตอบสนอง Native บน iOS, Android, MacOS, Windows และเลเยอร์ความเข้ากันได้สำหรับเว็บ

ตรวจสอบแอปตัวอย่าง

• คุณสมบัติ
• การติดตั้ง
• การแก้ไขปัญหา
• ปัญหาการเปิด
• การใช้งาน
• ปัญหาที่รู้จัก

คุณสมบัติ

1. รองรับองค์ประกอบและคุณสมบัติ SVG ส่วนใหญ่ (rect, วงกลม, เส้น, polyline, polygon, g ... )
2. ง่ายต่อการแปลงรหัส SVG เป็น React-Native-SVG

การติดตั้ง

ด้วยงานแสดงสินค้า

✅แอพ Expo Client มาพร้อมกับรหัสดั้งเดิมที่ติดตั้ง!

ติดตั้ง JavaScript ด้วย:

npx expo install react-native-svg

ดู เอกสาร Expo สำหรับข้อมูลเพิ่มเติมหรือกระโดดไปข้างหน้าเพื่อใช้งาน

ด้วย react-native-cli

1. ติดตั้งไลบรารี

   จาก NPM

   npm install react-native-svg

   จากเส้นด้าย

   yarn add react-native-svg

2. เชื่อมโยงรหัสเนทีฟ

    cd ios && pod install

รองรับการตอบโต้

React-Native-SVG	ตอบโต้
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

สนับสนุนผ้า

ผ้าเป็นระบบการเรนเดอร์ใหม่ของ Native Native ในรุ่น 13.0.0 ของโครงการนี้ผ้าได้รับการสนับสนุนเฉพาะสำหรับการตอบโต้ 0.69.0+ เท่านั้น การสนับสนุนสำหรับเวอร์ชันก่อนหน้านี้เป็นไปไม่ได้เนื่องจากการเปลี่ยนแปลงการกำหนดค่า

React-Native-SVG	ตอบโต้
> = 13.0.0	0.69.0+
> = 13.6.0	0.70.0+
> = 13.10.0	0.72.0+

การแก้ไขปัญหา

พฤติกรรมที่ไม่คาดคิด

หากคุณมีพฤติกรรมที่ไม่คาดคิดโปรดสร้างโครงการที่สะอาดด้วย React-Native และ React-Native-SVG เวอร์ชันล่าสุด

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

สร้างปัญหาใน App.js

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

การเพิ่มการรองรับ Windows

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

ปัญหาการเปิด

ตรวจสอบว่ายังคงเป็นปัญหากับเวอร์ชันล่าสุดตามที่ระบุไว้ในขั้นตอนก่อนหน้า ถ้าเป็นเช่นนั้นให้เปิดปัญหาใหม่รวมไฟล์ App.js ทั้งหมดระบุแพลตฟอร์มที่คุณทดสอบและผลลัพธ์ของการรันคำสั่งนี้:

react-native info

หากคุณสงสัยว่าคุณได้พบข้อผิดพลาดของข้อมูลจำเพาะคุณสามารถทดสอบโดยใช้ส่วนประกอบของคุณในโครงการ React-Native-Web โดยการใช้รหัสนี้เพื่อดูว่าเบราว์เซอร์ที่แตกต่างกันแสดงเนื้อหาเดียวกันได้อย่างไร: https://codesandbox.io /S/PYPN6MN3Y7 หากเบราว์เซอร์เอเวอร์กรีนใด ๆ ที่มีฐานผู้ใช้ที่สำคัญหรือตัวแทนผู้ใช้ SVG อื่น ๆ ทำให้เนื้อหา SVG บางส่วนดีขึ้นหรือรองรับ SVG และรายละเอียดที่เกี่ยวข้องมากขึ้นโปรดเปิดปัญหา ASAP

การใช้งาน

หากต้องการตรวจสอบวิธีการใช้ห้องสมุดดู usage.md

ปัญหาที่รู้จัก:

1. ไม่สามารถใช้จุดโฟกัสของ radialgradient บน Android

React Native SVG ได้รับการดูแลโดยคฤหาสน์ซอฟต์แวร์

ตั้งแต่ปี 2012 ซอฟต์แวร์คฤหาสน์เป็นเอเจนซี่ซอฟต์แวร์ที่มีประสบการณ์ในการสร้างเว็บและแอพมือถือ เราเป็นผู้สนับสนุนหลักของ Native Native และผู้เชี่ยวชาญในการจัดการกับปัญหาดั้งเดิมของ React ทุกชนิด เราสามารถช่วยคุณสร้างผลิตภัณฑ์ในฝันต่อไปของคุณ - จ้างเรา