react native svg

react-native-svg fornece suporte SVG para reagir nativo no iOS, Android, MacOS, Windows e uma camada de compatibilidade para a Web.

Confira o aplicativo de exemplo

• Características
• Instalação
• Solução de problemas
• Questões de abertura
• Uso
• Questões conhecidas

Características

1. Suporta a maioria dos elementos e propriedades SVG (RECT, Circle, Line, Polyline, Polygon, G ...).
2. Fácil de converter o código SVG para reagir-nativo-SVG.

Instalação

Com expo

✅ O aplicativo Client Expo vem com o código nativo instalado!

Instale o JavaScript com:

npx expo install react-native-svg

Veja os documentos da Expo para obter mais informações ou pule para o uso.

Com react-nativo-cli

1. Instale a biblioteca

   do npm

   npm install react-native-svg

   do fio

   yarn add react-native-svg

2. Vincular o código nativo

    cd ios && pod install

Versões nativas do React suportado

React-nativo-SVG	react-nativo
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

Suporte para tecido

O tecido é o novo sistema de renderização da reação. A partir da versão 13.0.0 deste projeto, o Fabric é suportado apenas para 0,69,0+ no React-nativo. O suporte para versões anteriores não é possível devido à quebra de mudanças na configuração.

React-nativo-SVG	react-nativo
> = 13.0.0	0,69,0+
> = 13.6.0	0.70.0+
> = 13.10.0	0,72,0+

Solução de problemas

Comportamento inesperado

Se você tiver um comportamento inesperado, crie um projeto limpo com as mais recentes versões de react-nativo e react-nativo-SVG

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

Faça uma reprodução do problema em App.js

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

Adicionando suporte ao Windows

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

Questões de abertura

Verifique se ainda é um problema com a versão mais recente, conforme especificado na etapa anterior. Nesse caso, abra um novo problema, inclua todo o arquivo App.js , especifique quais plataformas você testou e os resultados da execução deste comando:

react-native info

Se você suspeitar que encontrou um bug de conformidade de especificações, pode testar o uso do seu componente em um projeto de reação-nativa na Web binger esse código e caixa de código para ver como diferentes navegadores renderizam o mesmo conteúdo: https://codesandbox.io /s/pypn6mn3y7 Se qualquer navegador Evergreen com base de usuário significativo ou outro agente de usuário do SVG renderiza algum conteúdo SVG melhor ou suporta mais do SVG e especificações relacionadas, abra um problema o mais rápido possível.

Uso

Para verificar como usar a biblioteca, consulte Usage.md

Questões conhecidas:

1. Não é possível aplicar o ponto de foco do radialgradiente no Android.

React Native SVG é mantido pela mansão de software

Desde 2012, o software Mansion é uma agência de software com experiência na criação de aplicativos da Web e móveis. Somos os principais colaboradores e especialistas do React React ao lidar com todos os tipos de problemas nativos do React. Podemos ajudá -lo a construir seu próximo produto dos sonhos - contrate -nos.