Usando SVGs no React Native: um tutorial com exemplos

Ao desenvolver o aplicativo React Native, pode ser necessário implementar ícones. Agora, a maneira fácil de fazer isso é simplesmente extrair o arquivo.png ou.jpeg do ícone e usá-lo no componente Imagem do React Native. Isso resolveria o problema, mas você não obterá qualidade nítida e acabará enchendo seu aplicativo com tamanhos de arquivo de imagem maiores, o que aumentará o tamanho do pacote do aplicativo.

Em vez de usar.png ou arquivos.jpeg em seu aplicativo React Native, você deve usar o formato SVG . SVG é um formato baseado em vetor que pode escalar infinitamente sem comprometer a qualidade.

Neste guia, vamos demonstrar como implementar ícones SVG em seu aplicativo React Native usando a biblioteca react-native-svg.

Cobriremos o seguinte com exemplos práticos:

O que são Scalable Vector Graphics (SVG)? O React Native é compatível com SVGs? Renderização de SVG formas no React Native Como renderizar imagens SVG e ícones no React Native Renderizando SVGs usando strings XML

O que são Scalable Vector Graphics (SVG)?

O SVG é baseado em XML formato usado para renderizar imagens vetoriais. Uma imagem vetorial pode escalar o quanto você quiser sem pixelar porque as imagens vetoriais são orientadas por equações matemáticas e não têm pixels como outros formatos de imagem, como.png e.jpeg.

Por causa do vetor natureza do formato SVG, a imagem é independente da resolução. Uma imagem SVG parece nítida em qualquer tela, desde as lindas telas de densidade de pixels de 285 DPI encontradas em novos smartphones até as telas de 85 DPI de monitores padrão. Os arquivos SVG também são pequenos em tamanho em comparação com outros formatos de imagem.

Se você abrir um arquivo SVG em um editor de texto, verá um grande código XML com números e vários nós. Neste tutorial, não vamos nos concentrar no próprio SVG. Em vez disso, demonstraremos como renderizar SVGs em uma tela de aplicativo móvel.

O React Native oferece suporte a SVGs?

Renderizar SVGs em aplicativos móveis não é tão simples quanto na web, onde você pode usar SVG diretamente como uma fonte de imagem ou colar o código SVG em seu arquivo HTML. Isso ocorre porque não há um componente React Native embutido que possa renderizar SVGs diretamente.

Como o React Native não fornece suporte padrão para SVG, teremos que instalar algumas bibliotecas do registro npm. Felizmente, há um pacote npm popular que funciona bem para a maioria dos casos de uso chamado react-native-svg .

Vamos começar configurando um projeto React Native. Execute o seguinte comando:

npx react-native init SvgDemoApp

Para instalar o react-native-svg e pacotes react-native-svg-transformer , vá para o diretório do projeto e execute o seguinte comando:

cd SvgDemoApp npm i react-native-svg npm i–save-dev react-native-svg-transformer

react-native-svg fornece suporte SVG para seu projeto React Native nas plataformas Android e iOS. react-native-svg-transformer permite que você importe arquivos SVG locais em seu projeto React Native, como você faria em um Projeto Creact React App na web.

Se você estiver usando Expo CLI em vez de React Native CLI , você pode começar executando os seguintes comandos.

expo init SvgDemoApp expo install react-native-svg

Renderizando formas SVG no React Native

Vamos ver como você pode usar a biblioteca react-native-svg para renderizar SVGs em seu aplicativo.

Abra o projeto em seu editor favorito e comece importando os componentes Svg e Circle de react-native-svg, como mostrado abaixo.

import Svg, {Circle} de’react-native-svg’;

O componente

O componente

Dentro do componente

O componente assume as coordenadas xey como cx e cy props, respectivamente. Essas coordenadas definem como e onde seu componente SVG será posicionado dentro do contêiner. Se você renderizasse uma forma SVG diferente, como um retângulo, o mesmo seria representado por adereços xey, respectivamente.

Para descrever o raio do círculo, você pode passar um inteiro como um corda ao suporte r. Você pode definir este valor para aumentar ou diminuir o tamanho do círculo SVG renderizado.

O traço prop pode ser usado para denotar a cor da borda ao redor do elemento SVG e o strokeWidth representa a espessura dessa borda. Finalmente, o preenchimento indica a cor do elemento SVG renderizado. Esses adereços são semelhantes aos atributos no elemento HTML nativo

Dê uma olhada em todo o código que renderiza um círculo SVG na tela:

import React from’react’; import {StyleSheet, View} from’react-native’; importar Svg, {Círculo} de’react-native-svg’; exportar função padrão App () {return ( ); } const styles=StyleSheet.create ({container: {flex: 1, backgroundColor:’#fff’, alignItems:’center’, justifyContent:’center’,},});

Você deve ver um círculo SVG violeta, conforme mostrado abaixo:

Observe que envolvi o componente

Da mesma forma, você pode renderizar outras formas SVG, como retângulos, polígonos, linhas, elipses, etc..

Como renderizar imagens e ícones SVG no React Native

Agora que você entende como renderizar qualquer SVG usando a biblioteca react-native-svg, vamos explorar como você pode renderizar SVG ícones e imagens em seu aplicativo.

Aqui, você precisa usar um componente diferente chamado SvgUri, então vamos importá-lo da biblioteca:

import {SvgUri} de’react-native-svg’;

O componente pega a largura, altura e uri prop. Você pode especificar o uri prop apontando para o URL do SVG. Por exemplo, se você deseja renderizar th is SVG , você pode atribuir esse URL ao uri prop do seu componente , conforme mostrado abaixo:

Isso é bastante semelhante a renderizar imagens em React, onde você especificaria o atributo src do seu como o URL da imagem.

O código acima deve renderizar o SVG na tela conforme mostrado abaixo:

Você pode ajustar a largura e a altura do SVG usando os adereços de largura e altura do componente . Ao contrário da renderização de formas SVG, você não precisa de um componente de contêiner aqui.

Você pode encontrar a necessidade de fazer referência a um ícone SVG local ou uma imagem de dentro de seu projeto. Ao configurar o projeto de exemplo, lembre-se de que também instalou a biblioteca react-native-svg-transformer. Você pode usar isso para renderizar um ícone SVG local ou imagem dentro de seu projeto.

Primeiro, você precisará fazer algumas alterações de configuração em seu projeto. Vá até o arquivo metro.config.js do seu projeto. Se este arquivo não existir em seu projeto, você precisará criá-lo.

Em seguida, adicione o seguinte código dentro dele:

const {getDefaultConfig}=require (‘metro-config’); module.exports=(async ()=> {const {resolver: {sourceExts, assetExts},}=await getDefaultConfig (); return {transformador: {babelTransformerPath: require.resolve (‘react-native-svg-transformer’), }, resolvedor: {assetExts: assetExts.filter (ext=> ext!==’svg’), sourceExts: [… sourceExts,’svg’],},};}) ();

Em seguida, baixe um SVG e salve-o dentro do seu projeto, da mesma forma que faria para baixar uma imagem que deseja usar em seu projeto. Digamos que você nomeou seu arquivo SVG como image.svg. Agora você pode importar este arquivo SVG como qualquer outro componente:

import SVGImg from’./image.svg’;

E renderize-o dentro de qualquer componente:

O código acima deve renderizar o mesmo SVG na tela. Se o seu projeto requer que você renderize ícones SVG localmente, você pode seguir esta abordagem para renderizar diferentes ícones SVG em seu aplicativo.

Renderizando SVGs usando strings XML

Em casos raros, se você não for capaz de fazer referência a SVGs locais usando o componente , você pode usar strings XML para renderizar SVGs em um aplicativo React Native.

Digamos que você tenha baixado este SVG f ile em seu projeto. Se você entrar nesse arquivo SVG, verá vários códigos XML com um elemento HTML

import {SvgXml} from’react-native-svg’;

Copie tudo dentro do elemento

const xml=` `;

Em seguida, passe a variável acima para o xml prop dentro de seu componente , conforme mostrado abaixo:

E voila! Agora você deve ver o SVG acima na tela.

Conclusão

SVGs são ótimos para renderizar imagens e ícones que você deseja usar em seus aplicativos React Native. Você pode até mesmo usá-los para criar formas e padrões complexos para adicionar mais apelo estético ao design do seu aplicativo.

Lembre-se de que armazenar um grande número de arquivos SVG localmente ainda irá inchar seu aplicativo. Você deve sempre evitar salvar um grande número de arquivos SVG em seu projeto e referenciá-los localmente. Se for absolutamente necessário, você pode otimizar seus arquivos SVG usando esta ferramenta útil .

Espero que este tutorial facilite o uso de SVGs em seu projeto React Native. Você também pode explorar e brincar com exemplos ilustrados nos documentos oficiais react-native-svg .