Font Awesome Icons für React Native

Blog

Font Awesome Icons für React Native

reagieren-native-fontawesome .Reagieren Sie native Fontawesome-Symbole.

Leistungen

  • Keine Bloatware, ein Paket mit einem Iconset, nicht mehr und nicht weniger
  • Vollständiger Satz von FontAwesome Icons richtig aktualisiert
  • Wahnsinnig schnell mit minimalem Speicherbedarf
  • Verwendet das Betriebssystem zum Rendern von Symbolen für die beste Leistung seiner Klasse (siehe Leistungshinweis unten)

Installationsprozess

Verwendung von Garn

npm i -g yarn

yarn add react-native-fontawesome

Verwendung über dem Meeresspiegel

npm i --save react-native-fontawesome

Dieses Modul verwendet die Font Awesome-Version 5.4.1 . Es ist nicht erforderlich, Binärdateien zu verknüpfen, importieren Sie einfach das Paket und binden Sie die Schriftartdatei in Ihr Projekt ein.

Dieses Paket lädt Font Awesome nicht für Sie herunter. Sie müssen das Paket manuell herunterladen und in Ihren Arbeitsordner legen.

Befolgen Sie diese Anleitungen, um FontAwesome.ttf zu Ihren Projekten hinzuzufügen:

Hinzufügen von benutzerdefinierten Schriftarten zu einer nativen React-Anwendung für IOS

Benutzerdefinierte Schriftarten in React Native für Android

Verwendungszweck

import FontAwesome, { Icons } from 'react-native-fontawesome'; ... render() { return ( {Icons.chevronLeft} Text ); },

Hinweis zu Bindestrichen

Javascript akzeptiert keine Bindestriche als gültige Objektnamen, daher wurden alle Bindestriche entfernt und
Namen in Kamel-Fall umgewandelt.

Beispiel: |_+_| wird |_+_|

Sie können den Namen wie folgt parsen, wenn Sie möchten:

th-large

Sie können dies in einigen Fällen verwenden, wenn Sie das Symbol aus dem Web in Ihrer Datenbank speichern und dann dynamisch in Ihrem Handy verwenden.

Styling

Sie können Stile direkt in die FontAwesome RN-Komponente anwenden, indem Sie einfach einen Stil übergeben, wie Sie es in einem |_+_| . tun Komponente.

thLarge

Standardmäßig ist das |_+_| verwendet ist |_+_| aber du kannst die |_+_| . verwenden Objekt, um das Recht |_+_| zu setzen, wie folgt:

import { Icons, parseIconName } from 'react-native-fontawesome'; const validIcon = parseIconFromClassName('fas fa-chevron-left') // will be parsed to chevronLeft // So anywhere you would have used Icons.chevronLeft (or some other icon name) // you can now just use the returned value directly (validIcon in this example). // The function parseIconName internally returns an Icons[parsedIconName] result.

Die gültigen Optionen sind:

  • |_+_| - Schriftart Awesome Solid (Standard)
  • |_+_| - Schriftart Awesome Regular
  • |_+_| - Font Awesome Brands

Alle Schriftfamilien finden Sie hier: fontawesome-free-5.4.1-web.zip

Warum das so schnell ist und fast keinen zusätzlichen Speicher benötigt

Dieses Paket verwendet das Text-Element zum Rendern von Symbolen. Das Textelement delegiert
an das Betriebssystem den Renderprozess der Icons basierend auf der Font-Datei.
Sowohl IOS als auch Android rendern Schriftarten erstaunlich schnell mit geringem Speicheraufwand. Im Wesentlichen
FontAwesome.ttf wird vom Betriebssystem zum Rendern von Symbolen verwendet und profitiert von Jahren
der nativen Softwareverbesserung sowie der Hardwarebeschleunigung.

Download-Details:

Autor: Eintreten

Live-Demo: https://fontawesome.com/

GitHub: https://github.com/entria/react-native-fontawesome

#reagieren-native #programmierung