Vektorikoner i React Native

At tilføje ikoner til dine mobilapplikationer er afgørende for brugergrænsefladen og navigationen. Vektorikoner tilbyder en række fordele i forhold til traditionelle bitmap-billeder, herunder skalerbarhed uden tab af kvalitet og mindre filstørrelser. For React Native-udviklere er biblioteket react-native-vector-icons en populær og effektiv løsning til nemt at integrere et bredt udvalg af forudbyggede ikonfont-sæt.

Dette bibliotek gør det utroligt simpelt at indsætte smukke, tilpasselige ikoner i dine knapper, logoer, navigationslinjer og meget mere. Dets alsidighed gør det nemt at udvide og style ikonerne, så de passer perfekt til din apps design. Lad os dykke ned i, hvordan du installerer og bruger dette kraftfulde værktøj.

Installation af react-native-vector-icons

Før du kan begynde at bruge ikonerne, skal du installere biblioteket i dit React Native-projekt. Dette gøres nemt ved hjælp af npm eller yarn:

npm install --save react-native-vector-icons

eller

yarn add react-native-vector-icons

Efter installationen af pakken kræves der yderligere trin for at linke fontfilerne korrekt til dine native projekter (iOS og Android). Disse trin varierer afhængigt af platformen og om du bruger automatisk linking eller manuel opsætning.

Platformspecifik Opsætning

For at fontfilerne kan findes og bruges af dine native applikationer, skal de integreres korrekt i både iOS- og Android-projekterne.

iOS Opsætning

Den anbefalede metode til iOS involverer brug af Cocoapods. Naviger til din ios-mappe i terminalen og kør:

npx pod-install

Dette vil installere de nødvendige pods, herunder fontfilerne for react-native-vector-icons.

Derudover skal du redigere din Info.plist-fil for at fortælle iOS, hvilke fonte applikationen skal have adgang til. Åbn ios/DinAppNavn/Info.plist og tilføj en ny egenskab kaldet Fonts provided by application (eller UIAppFonts). Under denne egenskab skal du tilføje en liste (Array) af strengværdier, der repræsenterer navnene på de fontfiler, du ønsker at inkludere. En typisk liste, der inkluderer alle de medfølgende fonte, ser således ud:

<key>UIAppFonts</key> <array> <string>AntDesign.ttf</string> <string>Entypo.ttf</string> <string>EvilIcons.ttf</string> <string>Feather.ttf</string> <string>FontAwesome.ttf</string> <string>FontAwesome5_Brands.ttf</string> <string>FontAwesome5_Regular.ttf</string> <string>FontAwesome5_Solid.ttf</string> <string>FontAwesome6_Brands.ttf</string> <string>FontAwesome6_Regular.ttf</string> <string>FontAwesome6_Solid.ttf</string> <string>Foundation.ttf</string> <string>Ionicons.ttf</string> <string>MaterialIcons.ttf</string> <string>MaterialCommunityIcons.ttf</string> <string>SimpleLineIcons.ttf</string> <string>Octicons.ttf</string> <string>Zocial.ttf</string> <string>Fontisto.ttf</string> </array>

Husk at genkompilere dit projekt efter at have foretaget ændringer i Info.plist.

Android Opsætning

For Android er den anbefalede metode at bruge Gradle-scriptet, der følger med biblioteket. Dette script kopierer automatisk fontfilerne til den korrekte placering i dit Android-projekt.

Åbn filen android/app/build.gradle (ikke den i rodmappen) og tilføj følgende linje nær bunden af filen:

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

Hvis du kun ønsker at inkludere et specifikt sæt fonte for at reducere app-størrelsen, kan du specificere dem før linjen med apply from::

project.ext.vectoricons = [ iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Angiv fontfiler her ] apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

Alternativt, hvis du foretrækker manuel integration, skal du kopiere fontfilerne fra node_modules/react-native-vector-icons/Fonts til mappen android/app/src/main/assets/fonts i dit projekt. Sørg for, at mappenavnet er i små bogstaver (fonts).

Efter enten Gradle-metoden eller manuel kopiering skal du genopbygge dit Android-projekt.

Andre Platforme

Biblioteket understøtter også macOS, Windows og Web. Opsætningen for disse platforme involverer typisk at sikre, at fontfilerne er tilgængelige for applikationen. For Web kræves der ofte konfiguration i din webpack-opsætning eller tilsvarende for at håndtere .ttf-filer og tilføje de nødvendige @font-face regler i din CSS.

Brug af Ikonkomponenten

Når biblioteket er korrekt installeret og opsat for din platform, er det meget enkelt at bruge ikonerne i dine komponenter. Du importerer den ønskede ikonfamilie og bruger <Icon>-komponenten.

import Icon from 'react-native-vector-icons/FontAwesome'; function MinKomponent() { return ( <Icon name="rocket" size={30} color="#900" /> ); }

Her er name navnet på ikonet (som du kan finde i bibliotekets dokumentation eller en ikon-explorer), size angiver størrelsen i 'logical pixels', og color sætter farven. Ikonkomponenten bygger på React Nativess <Text>-komponent, så du kan bruge de fleste tekstbaserede stilarter, såsom fontSize (som kan erstatte size), color, backgroundColor, padding og margin. Vær opmærksom på, at Androids Text-komponent historisk set ikke har understøttet kant-stilarter (border*); i så fald kan du pakke ikonet ind i en <View> for at anvende disse stilarter.

Bundtede Ikon-sæt

react-native-vector-icons kommer med et stort antal populære ikon-sæt forudbundtet. Dette giver dig adgang til tusindvis af ikoner lige ud af boksen. Her er et overblik over nogle af de mest brugte sæt:

Dette er blot et udvalg. Biblioteket inkluderer mange flere sæt, hvilket giver dig et enormt bibliotek af ikoner at vælge imellem til ethvert formål.

Brug som Billede (getImageSource)

Nogle gange skal du bruge et ikon som en billedkilde, for eksempel med React Nativess <Image>-komponent eller til native UI-elementer som en Android Toolbar. Biblioteket tilbyder metoder til at generere en bitmap-version af et ikon, som kan bruges som en billedkilde.

import Icon from 'react-native-vector-icons/Ionicons'; // Asynkron metode Icon.getImageSource('ios-person', 20, '#4F8EF7') .then(source => this.setState({ personIcon: source })); // Synkron metode (kan blokere, men undgår rendering glitches) const settingsIcon = Icon.getImageSourceSync('md-settings', 30, 'white');

Den synkrone metode getImageSourceSync kan være nyttig for at undgå visuelle forsinkelser, men bør bruges med forsigtighed, da den kan påvirke ydeevnen på den native tråd. Kilder genereret på denne måde caches for bedre ydeevne ved gentagen brug.

Icon.Button Komponent

For at gøre det endnu nemmere at oprette knapper med ikoner, tilbyder biblioteket en praktisk Icon.Button komponent. Den kombinerer et ikon med tekst og håndterer tryk-events.

import Icon from 'react-native-vector-icons/FontAwesome'; function LoginButton() { return ( <Icon.Button name="facebook" backgroundColor="#3b5998" onPress={() => console.log('Login with Facebook')} > Login with Facebook </Icon.Button> ); }

Du kan style både knappen og den indlejrede tekst for at opnå det ønskede udseende. Icon.Button understøtter egenskaber fra Text, TouchableHighlight og TouchableWithoutFeedback komponenterne, samt specifikke egenskaber som color (for ikon og tekst), size (for ikonet), iconStyle (kun for ikonet), backgroundColor og borderRadius.

Håndtering af Flere Stilarter (Multi-Style Fonts)

Nogle moderne font-sæt, som FontAwesome 5 og 6, inkluderer ikoner i flere stilarter (f.eks. Solid, Regular, Light, Brands). react-native-vector-icons understøtter dette. Du importerer blot den specifikke FontAwesome 5 eller 6 komponent og kan bruge en prop som solid eller light (hvis tilgængelig i den gratis version) for at vælge stilen.

import IconFA5 from 'react-native-vector-icons/FontAwesome5'; const ikonReg = <IconFA5 name="comments" size={30} color="#900" />; // Standard: Regular const ikonSolid = <IconFA5 name="comments" size={30} color="#900" solid />; // Solid stil

De statiske metoder som getFontFamily, getImageSource, osv., understøtter også et valgfrit stil-argument for disse multi-style font-sæt.

Brugerdefinerede Fonte

Hvis du har din egen ikonfont eller et sæt, der ikke er inkluderet i biblioteket, kan du nemt oprette din egen ikonkomponent ved hjælp af createIconSet, createIconSetFromFontello eller createIconSetFromIcoMoon. Dette kræver, at du har fontfilen (.ttf) og typisk en konfigurationsfil (som en glyphMap, eller en fil fra Fontello/IcoMoon), der mapper ikonnavne til tegnkoder.

import { createIconSetFromIcoMoon } from 'react-native-vector-icons'; import icoMoonConfig from './selection.json'; // Din IcoMoon konfigurationsfil const CustomIcon = createIconSetFromIcoMoon(icoMoonConfig, 'MinFontNavn', 'min-font-fil.ttf'); // Brug din brugerdefinerede ikonkomponent <CustomIcon name="hjerte" size={25} color="rød" />;

Sørg for at inkludere din brugerdefinerede fontfil i dit native projekt på samme måde som de forudbundtede fonte (via Info.plist på iOS og kopiering til assets/fonts på Android).

Animation

Da Icon-komponenten er baseret på Text, kan den animeres ved hjælp af React Nativess Animated API. Du skal blot oprette en animeret version af komponenten:

const AnimatedIcon = Animated.createAnimatedComponent(Icon);

Derefter kan du bruge AnimatedIcon med animerede værdier for egenskaber som style (f.eks. for at animere størrelse eller farve).

Ofte Stillede Spørgsmål (FAQ)

Q: Ikonerne vises som en overkrydset boks på Android. Hvad skal jeg gøre?

A: Dette skyldes næsten altid, at fontfilerne ikke er korrekt placeret i android/app/src/main/assets/fonts. Sørg for, at filerne er der, og at mappenavnet er korrekt (små bogstaver). Hvis du bruger Gradle-metoden, bekræft da at apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle") er tilføjet din android/app/build.gradle. Slet derefter Android-build-mappen (rm -rf android/app/build) og genkompiler projektet.

Q: Jeg får en fejl på iOS: "Unrecognized font family".

A: Tjek din Info.plist-fil i iOS-projektet. Sørg for, at du har tilføjet UIAppFonts-nøglen med en liste over de fontfilnavne (.ttf) du bruger. Bekræft også, at fontfilerne er inkluderet i 'Copy Bundle Resources' under 'Build Phases' i dit Xcode-projekt. Slet iOS-build-mappen (rm -rf ios/build) og genkompiler.

Q: Hvorfor vises forkerte ikoner efter opgradering?

A: Når du opgraderer react-native-vector-icons, skal de tilknyttede fontfiler i dine native projekter også opdateres. For Android skal du enten køre linking-kommandoen igen eller manuelt opdatere fontfilerne i assets/fonts. Gradle-metoden automatiserer dette. For iOS bør det normalt håndteres ved genkompilering, men en 'Clean Build Folder' i Xcode kan være nødvendig.

Q: Nogle ikoner mangler efter opgradering.

A: Nogle font-sæt-leverandører fjerner eller ændrer ikoner i nyere versioner. Hvis du er afhængig af specifikke ikoner fra en ældre version af en font, kan du muligvis tilføje den ældre font som en brugerdefineret font.

Q: Jeg får en fejl om "Unable to resolve module @expo/vector-icons/XXXFont".

A: Dette sker, hvis du bruger både @expo/vector-icons og react-native-vector-icons i samme projekt. Expo-pakken er en wrapper omkring dette bibliotek, og de konflikter. Vælg kun ét af bibliotekerne at bruge.

Konklusion

react-native-vector-icons er et uundværligt værktøj for enhver React Native-udvikler, der ønsker at tilføje professionelle og skalerbare ikoner til deres applikationer. Med et kæmpe udvalg af forudbundtede ikon-sæt, nem installation og fleksible brugsmuligheder, herunder tilpasning af størrelse og farve, samt oprettelse af ikonknapper, giver biblioteket dig alt, hvad du behøver for at forbedre din apps brugergrænseflade markant. Uanset om du har brug for standard UI-ikoner eller specifikke brand-ikoner, er chancerne gode for, at du finder dem her, eller nemt kan tilføje dine egne. Kom i gang i dag og se, hvordan vektorikoner kan transformere din React Native app.

Hvis du vil læse andre artikler, der ligner Vektorikoner i React Native, kan du besøge kategorien Fotografi.