1 00:00:02,300 --> 00:00:05,320 Das Hinzufügen von Symbolen ist in einer React 2 00:00:05,330 --> 00:00:07,760 Native-App, die expo verwendet, sehr einfach. 3 00:00:08,060 --> 00:00:09,670 Wir können den 4 00:00:09,670 --> 00:00:11,530 Button-Import übrigens loswerden, wir brauchen 5 00:00:11,900 --> 00:00:18,830 den eingebauten Button nicht mehr, sondern zurück zu den Icons, da ein Icon durch Importieren von etwas 6 00:00:18,980 --> 00:00:23,180 hinzugefügt werden kann und jetzt @ expo / vector-icons ist. 7 00:00:23,180 --> 00:00:26,410 Es mag ein seltsamer Paketname sein, aber genau 8 00:00:26,420 --> 00:00:31,910 das ist es. Es ist sozusagen Teil des Expo-Toolkits. Es ist automatisch in jedem React 9 00:00:31,910 --> 00:00:33,260 Native-Projekt enthalten, das 10 00:00:33,500 --> 00:00:40,250 Sie mit expo erstellt haben. Dort können Sie Komponenten importieren, mit denen Sie Symbole und Symbole rendern können 11 00:00:40,250 --> 00:00:45,920 Eine ziemlich schöne Komponente ist die Ionikon-Komponente. Dazu muss man einfach wissen, dass es verschiedene Icon-Sets gibt, 12 00:00:45,920 --> 00:00:52,790 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 13 00:00:52,820 --> 00:00:58,490 Team hinter ionic verwaltet werden. Die Symbole, die in dieser Gruppe enthalten sind, werden von diesem ionischen 14 00:00:58,490 --> 00:01:02,450 Team verwaltet, und ich spreche hier wirklich nur über die Symbole. 15 00:01:02,450 --> 00:01:08,300 Dies hat nichts mit uns zu tun Wenn Sie der React Native-App alles von ionisch hinzufügen, verwenden wir 16 00:01:08,300 --> 00:01:09,650 nur deren Symbole. 17 00:01:09,650 --> 00:01:16,080 Sie haben auch andere Icon-Sets wie böse Icons, Material-Icons, so dass Sie viele Icon-Sets verwenden können. Ein großartiger 18 00:01:16,190 --> 00:01:22,520 Ort, um alle enthaltenen Icons kennenzulernen und sich einen Überblick über alle enthaltenen Icons zu verschaffen, ist 19 00:01:22,520 --> 00:01:27,680 die offizielle Dokumentation zu Expo-Icons Auch diesem Video ist ein Link zu dieser Dokumentation 20 00:01:27,680 --> 00:01:34,270 beigefügt. Dort erfahren Sie nicht nur mehr über deren Verwendung, sondern auch den Link zum Symbolverzeichnis. Dies ist 21 00:01:34,270 --> 00:01:40,460 eine lange Liste aller enthaltenen Symbole Verwenden Sie und Sie sehen immer, zu welchem Symbolpaket dies gehört. 22 00:01:40,470 --> 00:01:45,110 Sie können dort auch nach Symbolen wie "Entfernen" suchen, um alle Symbole 23 00:01:45,110 --> 00:01:50,030 zu finden, die etwas mit dem Entfernen von Inhalten zu tun haben. Dann 24 00:01:50,030 --> 00:01:55,070 sehen Sie, dass etwas aus dem Ionikon-Paket vorhanden ist, etwas aus dem Material 25 00:01:55,070 --> 00:01:56,820 Icons-Paket und so weiter. 26 00:01:57,140 --> 00:02:01,820 Jetzt stammen die Symbole, nach denen ich im Voraus gesucht habe, aus dem Ionicons-Paket. 27 00:02:01,820 --> 00:02:07,040 Hier importiere ich Ionics von @ expo / vector-icons und dies ist nun automatisch eine 28 00:02:07,040 --> 00:02:10,830 Komponente, die wir in unserem jsx-Code verwenden können, um ein 29 00:02:10,940 --> 00:02:15,820 Symbol auszugeben. Wenn wir Material-Icons verwendet hätten, wäre dies auch eine Komponente nur 30 00:02:15,820 --> 00:02:16,270 für 31 00:02:16,340 --> 00:02:22,810 ein Material-Symbol ausgeben, aber ich möchte ein Ionicon-Symbol verwenden, also werde ich das verwenden und jetzt gehe ich 32 00:02:22,810 --> 00:02:30,040 zum jsx-Code und anstatt hier niedriger zu verwenden, werde ich tatsächlich ein solches Ionicon ausgeben, ein solches Symbol hier In 33 00:02:30,040 --> 00:02:36,250 meiner Schaltfläche und das Tolle ist, dass ein solches Symbol hier auch in unserer Schaltfläche verschachtelt werden 34 00:02:36,250 --> 00:02:43,930 kann, obwohl das, was wir hier ausgeben, Requisitenkinder, anstelle eines Textknotens ist, aber das unterstützt wird, können Sie darin eine Symbolkomponente 35 00:02:43,930 --> 00:02:46,290 ausgeben Textkomponente auch, damit das funktioniert. 36 00:02:47,140 --> 00:02:51,910 Zurück zu diesem Ionicon hier, im Moment sage ich nichts über das Symbol, 37 00:02:52,390 --> 00:02:58,400 das ich verwenden möchte, und dort hat das Symbol, das ich im Voraus ausgewählt habe, den Namen md-remove. 38 00:02:58,900 --> 00:03:06,430 Jetzt sagst du React Native und einer Art Expo, dass du dieses Symbol verwenden möchtest, indem du den Namen prop hier auf 39 00:03:06,520 --> 00:03:12,520 ionicons hinzufügst. Dann wird eine Zeichenfolge mit dem Symbolnamen verwendet, den du in diesem Verzeichnis findest, oder? 40 00:03:12,550 --> 00:03:15,970 Also habe ich hier dieses Symbol ausgewählt, das ich 41 00:03:16,000 --> 00:03:20,440 verwenden möchte. Das ist also der Name md-remove, den wir jetzt hier verwenden. 42 00:03:20,530 --> 00:03:22,520 Das ist also der Symbolname, den wir hier hinzugefügt haben. 43 00:03:22,600 --> 00:03:28,660 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 44 00:03:28,660 --> 00:03:33,250 Farbe, die dieses Symbol haben sollte, und hier stelle ich ein, dass es eine weiße Farbe hat. 45 00:03:33,280 --> 00:03:38,920 Jetzt kopiere ich das und verwende dasselbe auf der größeren Schaltfläche, aber dort ist das Symbol natürlich 46 00:03:38,920 --> 00:03:39,320 ein 47 00:03:39,340 --> 00:03:45,580 anderes. Hier habe ich md-add als Symbol ausgewählt, und Sie können natürlich diese Liste von Symbolen durchsuchen und verschiedene 48 00:03:45,610 --> 00:03:50,650 Symbole auswählen, wenn Sie möchten und Sie können auch ein anderes Symbolpaket anstelle von Ionicons 49 00:03:50,650 --> 00:03:54,830 ausprobieren oder sogar zwei verschiedene Symbolpakete in ein und derselben Komponente verwenden. 50 00:03:54,850 --> 00:03:59,650 Sie müssen sich nicht nur an ein Symbolpaket halten, sondern können sie beliebig mischen 51 00:03:59,650 --> 00:04:04,150 und anpassen, sodass wir hier ein Ionicon und hier ein Materialsymbol rendern können. 52 00:04:04,150 --> 00:04:08,350 Natürlich sollten Sie sicherstellen, dass das Gesamtbild Ihrer App gut aussieht Sinn. 53 00:04:08,350 --> 00:04:13,840 Wenn Sie also Symbole zu wild mischen, wird es wahrscheinlich nicht so gut aussehen. Normalerweise möchten 54 00:04:13,840 --> 00:04:18,160 Sie sich also an einen Satz halten, müssen dies aber technisch nicht. 55 00:04:18,190 --> 00:04:23,500 Also hier habe ich diese beiden Symbole ausgewählt und jetzt, wenn wir dies speichern, starten wir hier ein neues Spiel. 56 00:04:23,500 --> 00:04:30,190 Jetzt haben wir hier ein Plus- und ein Minus-Symbol, um anzuzeigen, ob die Zahlen niedriger oder höher sein sollen, und das 57 00:04:30,190 --> 00:04:36,100 ist meiner Meinung nach ziemlich schön, da wir dadurch eine völlig neue Möglichkeit zum Erstellen von Benutzeroberflächen erhalten, 58 00:04:36,430 --> 00:04:41,380 da wir mit Symbolen wirklich ein weiteres wichtiges Werkzeug haben für die Erstellung großartiger Benutzererlebnisse.