Dodawanie ikon jest bardzo proste w aplikacji React
Native, która korzysta z expo.
Nawiasem mówiąc, możemy
pozbyć się importu przycisku,
nie potrzebujemy już wbudowanego przycisku, ale wracamy do ikon, ponieważ ikonę można dodać, importując coś
z, a teraz jest to @ expo / vector-icons.
Może to być trochę dziwna nazwa pakietu, ale
taka właśnie jest, jest częścią zestawu narzędzi expo, że tak powiem, jest automatycznie
dołączana do
każdego projektu React Native utworzonego za pomocą expo i tam możesz importować komponenty, które pomagają renderować ikony
i całkiem niezłym składnikiem jest składnik jonowy. W tym celu musisz po prostu wiedzieć, że istnieją różne
zestawy ikon, które są wbudowane w expo lub w ten pakiet ikon wektorowych. Ionicons to jeden zestaw ikon zarządzanych przez zespół
stojący za jonami, więc ikonami zawartymi w tym zestawie zarządza ten zespół jonów,
a tak naprawdę mówię tutaj o ikonach, to nie ma
nic wspólnego z nami dodając wszystko od jonowej do aplikacji React Native, używamy tylko
ich ikon.
Masz również inne zestawy ikon, takie jak złe ikony, ikony materiałów, więc wiele zestawów ikon, których możesz użyć,
a doskonałym miejscem do zapoznania się ze wszystkimi zawartymi ikonami i uzyskania przeglądu wszystkich zawartych ikon jest
oficjalna dokumentacja ikon expo dołączony również do tego filmu, link do tej dokumentacji i
tam możesz nie tylko dowiedzieć się więcej o tym, jak z nich korzystać, ale znajdziesz również ten link
do katalogu ikon i to jest długa lista wszystkich zawartych ikon, które możesz użyj i zawsze widzisz,
do którego pakietu ikon to należy, możesz także wyszukać ikony, takie
jak usuń, aby znaleźć wszystkie ikony, które mają coś wspólnego z usuwaniem rzeczy,
a następnie widzisz, że jest coś z pakietu jonów, coś z materiału pakiet
ikon i tak dalej.
Teraz ikony, których szukałem wcześniej, pochodzą z pakietu jonów.
Więc tutaj zaimportuję jony z @ expo / vector-icons, a teraz jest to
automatycznie komponent, którego możemy użyć w naszym kodzie jsx
do wygenerowania ikony, a gdybyśmy użyli ikon materialnych, byłby to również składnik wypisuję
ikonę materiału, ale chcę użyć ikony jonowej, więc użyję tego, a teraz przejdę do kodu jsx i
zamiast korzystać z niższego tutaj, faktycznie wypuszczę tutaj taki jonon, taką ikonę tutaj w moim przycisku i wielką
rzeczą jest to, że taka ikona tutaj może być również zagnieżdżona w naszym przycisku, nawet jeśli
to, co tutaj wypisujemy, podpiera dzieci, jest zamiast węzła tekstowego, ale to jest obsługiwane, możesz wypisać komponent ikony w tym
komponent tekstowy, więc to zadziała.
Ale wracając do tego jononu tutaj, teraz nie mówię nic
o ikonie, której chcę użyć i tam, ikona, którą wybrałem wcześniej, ma nazwę md-remove.
Teraz mówisz React Native i rodzajowi expo, że chcesz użyć tej ikony, dodając tutaj nazwę prop na jonach,
a następnie pobiera ciąg z nazwą ikony, którą znajdziesz w tym katalogu, prawda?
Więc tutaj wybrałem tę ikonę, której
chcę użyć, więc to jest nazwa md-remove, której teraz używamy.
To jest nazwa ikony, którą tutaj dodaliśmy.
Następnie możesz także ustawić rozmiar ikony w pikselach, a tutaj pójdę z 24, aby mieć ładną dużą ikonę, a
także kolor, który powinna mieć ta ikona, a tutaj ustawię, aby miała biały kolor.
Teraz skopiuję to i użyję tego samego na większym przycisku, ale oczywiście ikona jest inna, tutaj
wybrałem md-add jako ikonę i możesz oczywiście przejrzeć tę listę ikon i wybrać inne ikony, jeśli
chcesz i możesz także wypróbować różne pakiety ikon zamiast jonowych lub nawet użyć
dwóch różnych pakietów ikon w jednym i tym samym składniku.
Nie musisz trzymać się tylko jednego pakietu ikon, możesz je dowolnie mieszać
i dopasowywać, abyśmy mogli tutaj renderować jonizację i renderować ikonę materiału,
ale oczywiście powinieneś upewnić się, że ogólny wygląd aplikacji zmysł.
Jeśli więc zbyt dzikie miksujesz ikony, prawdopodobnie nie będzie tak dobrze wyglądać, więc zazwyczaj chcesz trzymać
się jednego zestawu, ale nie musisz tego robić z technicznego punktu widzenia.
Więc tutaj wybrałem te dwie ikony i teraz, jeśli to uratujemy, zaczniemy tutaj nową grę.
Teraz mamy tutaj ikonę plusa i minusa, która wskazuje, czy liczby powinny być niższe czy wyższe, i moim
zdaniem jest to całkiem miłe, ponieważ daje nam to zupełnie nowy sposób budowania interfejsów użytkownika, ponieważ
dzięki ikonom naprawdę mamy inne ważne narzędzie do budowania wspaniałych wrażeń użytkowników.