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