Das Hinzufügen von Symbolen ist in einer React
Native-App, die expo verwendet, sehr einfach.
Wir können den
Button-Import übrigens loswerden, wir brauchen
den eingebauten Button nicht mehr, sondern zurück zu den Icons, da ein Icon durch Importieren von etwas
hinzugefügt werden kann und jetzt @ expo / vector-icons ist.
Es mag ein seltsamer Paketname sein, aber genau
das ist es. Es ist sozusagen Teil des Expo-Toolkits. Es ist automatisch in jedem React
Native-Projekt enthalten, das
Sie mit expo erstellt haben. Dort können Sie Komponenten importieren, mit denen Sie Symbole und Symbole rendern können
Eine ziemlich schöne Komponente ist die Ionikon-Komponente. Dazu muss man einfach wissen, dass es verschiedene Icon-Sets gibt,
die in expo oder in dieses Vektor-Icons-Paket integriert sind, um genau zu sein. Ionicons ist eine Gruppe von Symbolen, die am Ende vom
Team hinter ionic verwaltet werden. Die Symbole, die in dieser Gruppe enthalten sind, werden von diesem ionischen
Team verwaltet, und ich spreche hier wirklich nur über die Symbole.
Dies hat nichts mit uns zu tun Wenn Sie der React Native-App alles von ionisch hinzufügen, verwenden wir
nur deren Symbole.
Sie haben auch andere Icon-Sets wie böse Icons, Material-Icons, so dass Sie viele Icon-Sets verwenden können. Ein großartiger
Ort, um alle enthaltenen Icons kennenzulernen und sich einen Überblick über alle enthaltenen Icons zu verschaffen, ist
die offizielle Dokumentation zu Expo-Icons Auch diesem Video ist ein Link zu dieser Dokumentation
beigefügt. Dort erfahren Sie nicht nur mehr über deren Verwendung, sondern auch den Link zum Symbolverzeichnis. Dies ist
eine lange Liste aller enthaltenen Symbole Verwenden Sie und Sie sehen immer, zu welchem Symbolpaket dies gehört.
Sie können dort auch nach Symbolen wie "Entfernen" suchen, um alle Symbole
zu finden, die etwas mit dem Entfernen von Inhalten zu tun haben. Dann
sehen Sie, dass etwas aus dem Ionikon-Paket vorhanden ist, etwas aus dem Material
Icons-Paket und so weiter.
Jetzt stammen die Symbole, nach denen ich im Voraus gesucht habe, aus dem Ionicons-Paket.
Hier importiere ich Ionics von @ expo / vector-icons und dies ist nun automatisch eine
Komponente, die wir in unserem jsx-Code verwenden können, um ein
Symbol auszugeben. Wenn wir Material-Icons verwendet hätten, wäre dies auch eine Komponente nur
für
ein Material-Symbol ausgeben, aber ich möchte ein Ionicon-Symbol verwenden, also werde ich das verwenden und jetzt gehe ich
zum jsx-Code und anstatt hier niedriger zu verwenden, werde ich tatsächlich ein solches Ionicon ausgeben, ein solches Symbol hier In
meiner Schaltfläche und das Tolle ist, dass ein solches Symbol hier auch in unserer Schaltfläche verschachtelt werden
kann, obwohl das, was wir hier ausgeben, Requisitenkinder, anstelle eines Textknotens ist, aber das unterstützt wird, können Sie darin eine Symbolkomponente
ausgeben Textkomponente auch, damit das funktioniert.
Zurück zu diesem Ionicon hier, im Moment sage ich nichts über das Symbol,
das ich verwenden möchte, und dort hat das Symbol, das ich im Voraus ausgewählt habe, den Namen md-remove.
Jetzt sagst du React Native und einer Art Expo, dass du dieses Symbol verwenden möchtest, indem du den Namen prop hier auf
ionicons hinzufügst. Dann wird eine Zeichenfolge mit dem Symbolnamen verwendet, den du in diesem Verzeichnis findest, oder?
Also habe ich hier dieses Symbol ausgewählt, das ich
verwenden möchte. Das ist also der Name md-remove, den wir jetzt hier verwenden.
Das ist also der Symbolname, den wir hier hinzugefügt haben.
Als nächstes können Sie auch die Symbolgröße in Pixel festlegen. Hier gehe ich mit 24 zu einem schönen großen Symbol und auch zu der
Farbe, die dieses Symbol haben sollte, und hier stelle ich ein, dass es eine weiße Farbe hat.
Jetzt kopiere ich das und verwende dasselbe auf der größeren Schaltfläche, aber dort ist das Symbol natürlich
ein
anderes. Hier habe ich md-add als Symbol ausgewählt, und Sie können natürlich diese Liste von Symbolen durchsuchen und verschiedene
Symbole auswählen, wenn Sie möchten und Sie können auch ein anderes Symbolpaket anstelle von Ionicons
ausprobieren oder sogar zwei verschiedene Symbolpakete in ein und derselben Komponente verwenden.
Sie müssen sich nicht nur an ein Symbolpaket halten, sondern können sie beliebig mischen
und anpassen, sodass wir hier ein Ionicon und hier ein Materialsymbol rendern können.
Natürlich sollten Sie sicherstellen, dass das Gesamtbild Ihrer App gut aussieht Sinn.
Wenn Sie also Symbole zu wild mischen, wird es wahrscheinlich nicht so gut aussehen. Normalerweise möchten
Sie sich also an einen Satz halten, müssen dies aber technisch nicht.
Also hier habe ich diese beiden Symbole ausgewählt und jetzt, wenn wir dies speichern, starten wir hier ein neues Spiel.
Jetzt haben wir hier ein Plus- und ein Minus-Symbol, um anzuzeigen, ob die Zahlen niedriger oder höher sein sollen, und das
ist meiner Meinung nach ziemlich schön, da wir dadurch eine völlig neue Möglichkeit zum Erstellen von Benutzeroberflächen erhalten,
da wir mit Symbolen wirklich ein weiteres wichtiges Werkzeug haben für die Erstellung großartiger Benutzererlebnisse.