react native svg

react-native-svg proporciona soporte SVG para reaccionar nativo en iOS, Android, macOS, Windows y una capa de compatibilidad para la web.

Mira la aplicación Ejemplo

• Características
• Instalación
• Solución de problemas
• Problemas de apertura
• Uso
• Problemas conocidos

Características

1. Admite la mayoría de los elementos y propiedades SVG (RECT, Circle, Line, Polyline, Polygon, G ...).
2. Fácil de convertir el código SVG para reaccionar-nativo-SVG.

Instalación

Con Expo

✅ ¡La aplicación del cliente Expo viene con el código nativo instalado!

Instale el JavaScript con:

npx expo install react-native-svg

Vea los documentos de exposición para obtener más información o avanzar al uso.

Con react-nativo-cli

1. Biblioteca de instalación

   de npm

   npm install react-native-svg

   de hilo

   yarn add react-native-svg

2. Enlace el código nativo

    cd ios && pod install

Versiones react-nativas compatibles

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

Soporte para la tela

Fabric es el nuevo sistema de renderizado de React Native. A partir de la versión 13.0.0 de este proyecto, Fabric es compatible solo para React-Native 0.69.0+. El soporte para versiones anteriores no es posible debido a los cambios de la configuración.

react-nativo-svg	react-nativo
> = 13.0.0	0.69.0+
> = 13.6.0	0.70.0+
> = 13.10.0	0.72.0+

Solución de problemas

Comportamiento inesperado

Si tiene un comportamiento inesperado, cree un proyecto limpio con las últimas versiones de React-Native y React-Native-SVG

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

Hacer una reproducción del problema en App.js

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

Agregar soporte de Windows

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

Problemas de apertura

Verifique que siga siendo un problema con la última versión como se especifica en el paso anterior. Si es así, abra un nuevo problema, incluya todo el archivo App.js , especifique qué plataformas ha probado y los resultados de ejecutar este comando:

react-native info

Si sospecha que ha encontrado un error de conformidad con especificaciones, puede probar el uso de su componente en un proyecto React-Native-Web bifonando este Codesandbox, para ver cómo los diferentes navegadores rinden el mismo contenido: https://codesandbox.io /S/PYPN6MN3Y7 Si algún navegador Evergreen con una base de usuarios significativa u otro agente de usuario de SVG renderiza algo de contenido de SVG mejor, o admite más de las especificaciones SVG y relacionadas, abra un problema lo antes posible.

Uso

Para verificar cómo usar la biblioteca, consulte Usage.md

Problemas conocidos:

1. No se puede aplicar el punto de enfoque de RadialGradient en Android.

React Native SVG es mantenido por Software Mansion

Desde 2012, Software Mansion es una agencia de software con experiencia en la creación de aplicaciones web y móviles. Somos colaboradores y expertos nativos de React React en el tratamiento de todo tipo de problemas nativos de React. Podemos ayudarlo a construir su próximo producto de ensueño: contratarse.