react native svg

react-native-svg提供了SVG支持，可以在iOS，Android，MacOS，Windows和Web的兼容層上進行反應。

查看示例應用程序

• 特徵
• 安裝
• 故障排除
• 開幕問題
• 用法
• 已知問題

特徵

1. 支持大多數SVG元素和屬性（Rect，Circle，Line，Polyline，Polygon，G ...）。
2. 易於將SVG代碼轉換為React-Native-SVG。

安裝

與博覽會

✅Expo客戶端應用程序隨附安裝本機代碼！

使用以下方式安裝JavaScript

npx expo install react-native-svg

有關更多信息，請參見世博文檔，或者提前進行使用。

與反應新的-CLI

1. 安裝庫

   來自NPM

   npm install react-native-svg

   來自紗線

   yarn add react-native-svg

2. 鏈接本地代碼

    cd ios && pod install

支持的反應新版本

反應-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

支持面料

Fabric是React Native的新渲染系統。從該項目的13.0.0版本開始，面料僅適用於反應的0.69.0+。由於配置的破壞，因此無法支持早期版本。

反應-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

添加窗口支持

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和相關規格，請盡快打開問題。

用法

要檢查如何使用庫，請參閱usage.md

已知問題：

1. 無法在Android上施加徑向聚焦的焦點。

React Native SVG由軟件大廈維護

自2012年以來，軟件大廈是一家具有構建Web和移動應用程序經驗的軟件代理商。我們是本地貢獻者和專家在處理各種反應本地問題方面的核心反應。我們可以幫助您建立下一個夢想的產品 - 僱用我們。