1
00:00:02,300 --> 00:00:05,320
Dodawanie ikon jest bardzo proste w aplikacji React

2
00:00:05,330 --> 00:00:07,760
Native, która korzysta z expo.

3
00:00:08,060 --> 00:00:09,670
Nawiasem mówiąc, możemy

4
00:00:09,670 --> 00:00:11,530
pozbyć się importu przycisku,

5
00:00:11,900 --> 00:00:18,830
nie potrzebujemy już wbudowanego przycisku, ale wracamy do ikon, ponieważ ikonę można dodać, importując coś

6
00:00:18,980 --> 00:00:23,180
z, a teraz jest to @ expo / vector-icons.

7
00:00:23,180 --> 00:00:26,410
Może to być trochę dziwna nazwa pakietu, ale

8
00:00:26,420 --> 00:00:31,910
taka właśnie jest, jest częścią zestawu narzędzi expo, że tak powiem, jest automatycznie

9
00:00:31,910 --> 00:00:33,260
dołączana do

10
00:00:33,500 --> 00:00:40,250
każdego projektu React Native utworzonego za pomocą expo i tam możesz importować komponenty, które pomagają renderować ikony

11
00:00:40,250 --> 00:00:45,920
i całkiem niezłym składnikiem jest składnik jonowy. W tym celu musisz po prostu wiedzieć, że istnieją różne

12
00:00:45,920 --> 00:00:52,790
zestawy ikon, które są wbudowane w expo lub w ten pakiet ikon wektorowych. Ionicons to jeden zestaw ikon zarządzanych przez zespół

13
00:00:52,820 --> 00:00:58,490
stojący za jonami, więc ikonami zawartymi w tym zestawie zarządza ten zespół jonów,

14
00:00:58,490 --> 00:01:02,450
a tak naprawdę mówię tutaj o ikonach, to nie ma

15
00:01:02,450 --> 00:01:08,300
nic wspólnego z nami dodając wszystko od jonowej do aplikacji React Native, używamy tylko

16
00:01:08,300 --> 00:01:09,650
ich ikon.

17
00:01:09,650 --> 00:01:16,080
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ć,

18
00:01:16,190 --> 00:01:22,520
a doskonałym miejscem do zapoznania się ze wszystkimi zawartymi ikonami i uzyskania przeglądu wszystkich zawartych ikon jest

19
00:01:22,520 --> 00:01:27,680
oficjalna dokumentacja ikon expo dołączony również do tego filmu, link do tej dokumentacji i

20
00:01:27,680 --> 00:01:34,270
tam możesz nie tylko dowiedzieć się więcej o tym, jak z nich korzystać, ale znajdziesz również ten link

21
00:01:34,270 --> 00:01:40,460
do katalogu ikon i to jest długa lista wszystkich zawartych ikon, które możesz użyj i zawsze widzisz,

22
00:01:40,470 --> 00:01:45,110
do którego pakietu ikon to należy, możesz także wyszukać ikony, takie

23
00:01:45,110 --> 00:01:50,030
jak usuń, aby znaleźć wszystkie ikony, które mają coś wspólnego z usuwaniem rzeczy,

24
00:01:50,030 --> 00:01:55,070
a następnie widzisz, że jest coś z pakietu jonów, coś z materiału pakiet

25
00:01:55,070 --> 00:01:56,820
ikon i tak dalej.

26
00:01:57,140 --> 00:02:01,820
Teraz ikony, których szukałem wcześniej, pochodzą z pakietu jonów.

27
00:02:01,820 --> 00:02:07,040
Więc tutaj zaimportuję jony z @ expo / vector-icons, a teraz jest to

28
00:02:07,040 --> 00:02:10,830
automatycznie komponent, którego możemy użyć w naszym kodzie jsx

29
00:02:10,940 --> 00:02:16,270
do wygenerowania ikony, a gdybyśmy użyli ikon materialnych, byłby to również składnik wypisuję

30
00:02:16,340 --> 00:02:22,810
ikonę materiału, ale chcę użyć ikony jonowej, więc użyję tego, a teraz przejdę do kodu jsx i

31
00:02:22,810 --> 00:02:30,040
zamiast korzystać z niższego tutaj, faktycznie wypuszczę tutaj taki jonon, taką ikonę tutaj w moim przycisku i wielką

32
00:02:30,040 --> 00:02:36,250
rzeczą jest to, że taka ikona tutaj może być również zagnieżdżona w naszym przycisku, nawet jeśli

33
00:02:36,250 --> 00:02:43,930
to, co tutaj wypisujemy, podpiera dzieci, jest zamiast węzła tekstowego, ale to jest obsługiwane, możesz wypisać komponent ikony w tym

34
00:02:43,930 --> 00:02:46,290
komponent tekstowy, więc to zadziała.

35
00:02:47,140 --> 00:02:51,910
Ale wracając do tego jononu tutaj, teraz nie mówię nic

36
00:02:52,390 --> 00:02:58,400
o ikonie, której chcę użyć i tam, ikona, którą wybrałem wcześniej, ma nazwę md-remove.

37
00:02:58,900 --> 00:03:06,430
Teraz mówisz React Native i rodzajowi expo, że chcesz użyć tej ikony, dodając tutaj nazwę prop na jonach,

38
00:03:06,520 --> 00:03:12,520
a następnie pobiera ciąg z nazwą ikony, którą znajdziesz w tym katalogu, prawda?

39
00:03:12,550 --> 00:03:15,970
Więc tutaj wybrałem tę ikonę, której

40
00:03:16,000 --> 00:03:20,440
chcę użyć, więc to jest nazwa md-remove, której teraz używamy.

41
00:03:20,530 --> 00:03:22,520
To jest nazwa ikony, którą tutaj dodaliśmy.

42
00:03:22,600 --> 00:03:28,660
Następnie możesz także ustawić rozmiar ikony w pikselach, a tutaj pójdę z 24, aby mieć ładną dużą ikonę, a

43
00:03:28,660 --> 00:03:33,250
także kolor, który powinna mieć ta ikona, a tutaj ustawię, aby miała biały kolor.

44
00:03:33,280 --> 00:03:39,320
Teraz skopiuję to i użyję tego samego na większym przycisku, ale oczywiście ikona jest inna, tutaj

45
00:03:39,340 --> 00:03:45,580
wybrałem md-add jako ikonę i możesz oczywiście przejrzeć tę listę ikon i wybrać inne ikony, jeśli

46
00:03:45,610 --> 00:03:50,650
chcesz i możesz także wypróbować różne pakiety ikon zamiast jonowych lub nawet użyć

47
00:03:50,650 --> 00:03:54,830
dwóch różnych pakietów ikon w jednym i tym samym składniku.

48
00:03:54,850 --> 00:03:59,650
Nie musisz trzymać się tylko jednego pakietu ikon, możesz je dowolnie mieszać

49
00:03:59,650 --> 00:04:04,150
i dopasowywać, abyśmy mogli tutaj renderować jonizację i renderować ikonę materiału,

50
00:04:04,150 --> 00:04:08,350
ale oczywiście powinieneś upewnić się, że ogólny wygląd aplikacji zmysł.

51
00:04:08,350 --> 00:04:13,840
Jeśli więc zbyt dzikie miksujesz ikony, prawdopodobnie nie będzie tak dobrze wyglądać, więc zazwyczaj chcesz trzymać

52
00:04:13,840 --> 00:04:18,160
się jednego zestawu, ale nie musisz tego robić z technicznego punktu widzenia.

53
00:04:18,190 --> 00:04:23,500
Więc tutaj wybrałem te dwie ikony i teraz, jeśli to uratujemy, zaczniemy tutaj nową grę.

54
00:04:23,500 --> 00:04:30,190
Teraz mamy tutaj ikonę plusa i minusa, która wskazuje, czy liczby powinny być niższe czy wyższe, i moim

55
00:04:30,190 --> 00:04:36,100
zdaniem jest to całkiem miłe, ponieważ daje nam to zupełnie nowy sposób budowania interfejsów użytkownika, ponieważ

56
00:04:36,430 --> 00:04:41,380
dzięki ikonom naprawdę mamy inne ważne narzędzie do budowania wspaniałych wrażeń użytkowników.