SVG képek használata

Az SVG (Scalable Vector Graphics) egy vektoros kép formátum, ami felbontásvesztés nélküli nagyítást és kicsinyítést tesz lehetővé.

Ahhoz, hogy ezt a React Native projektünkben használni tudjuk, kell egy megfelelő csomag. Ez pedig a react-native-svg.

Telepítés és használat

expo install react-native-svg

Amint telepítettük a csomagot, már használhatunk is svg képeket. Ezt kell importálni:

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

A képeket megadhatjuk egy .js fájlban is ami a kép XML forrását exportálja, ugyanis egy ilyen vektoros kép gyakorlatilag xml-ben írja le a képet. Szóval van valahol egy „eszVíDzsí” képünk egy JavaScript fájlban, pl. star.js

Ezt szintén importáljuk a megadott elérési úton.

import "../../../../assets/star";

Majd a kódban elhelyezünk egy <SvgXml /> elemet (komponenst), aminek van egy xml tulajdonsága:

<SvgXml xml={star} />

Lehet méretezni is:

<SvgXml xml={star} width={20} height={20} />

Dokumentáció

Íme itt a hivatalos dokumentáció.