1 00:00:02,250 --> 00:00:07,590 Dodanie przycisku do nagłówka, tak jak chcę, tutaj, taki przycisk nawigacyjny, wymaga 2 00:00:07,590 --> 00:00:11,670 początkowo trochę dodatkowej pracy, ale później jest bardzo prosty. 3 00:00:11,700 --> 00:00:17,160 Musimy przede wszystkim zainstalować dodatkowy pakiet, aby to ułatwić, ponieważ teoretycznie masz 4 00:00:17,160 --> 00:00:18,540 tutaj dużą moc. 5 00:00:18,660 --> 00:00:21,690 Możesz dodawać takie przyciski za pomocą opcji nawigacji, 6 00:00:21,690 --> 00:00:27,450 więc tutaj w MealDetailScreen, oprócz ustawiania tytułu nagłówka, możesz ustawić headerLeft i headerRight, aby dodać 7 00:00:27,450 --> 00:00:30,330 przyciski po lewej i prawej stronie tytułu. 8 00:00:30,330 --> 00:00:36,330 Zwykle chcesz używać prawej, ponieważ lewy jest zarezerwowany dla przycisku wstecz i ogólnie możesz 9 00:00:36,330 --> 00:00:39,310 po prostu zwrócić tam element jsx, 10 00:00:39,450 --> 00:00:47,220 więc możesz po prostu ustawić go na tekst, jak ulubiony, to jest coś, co możesz zrobić tutaj i 11 00:00:47,220 --> 00:00:51,870 faktycznie pozwolić mi pokaż to i zrestartuj serwer, zanim użyjemy pakietu, 12 00:00:51,870 --> 00:00:58,890 ponieważ chociaż możesz po prostu dodać tutaj komponent, poprawiając stylizację, odpowiednie pozycjonowanie dla wszystkich różnych platform, szczególnie 13 00:00:58,950 --> 00:01:05,430 jeśli nie używasz tu tylko tekstu, ale także może ikona, którą zwykle chcesz tam mieć, 14 00:01:05,430 --> 00:01:11,160 co może być naprawdę kłopotliwe i dlatego zainstalujemy dodatkowy pakiet, który ułatwi to 15 00:01:11,160 --> 00:01:14,810 w inny sposób niż jest w innym przypadku. 16 00:01:18,260 --> 00:01:25,510 Więc pozwól mi zrestartować to z npm start, nie instaluj npm, npm start i 17 00:01:25,850 --> 00:01:34,320 przy ponownym uruchomieniu, przeładujmy to tutaj na iOS i pokażę ci, co mamy teraz, gdy renderuję tekst. 18 00:01:34,520 --> 00:01:35,930 Widzisz ten tekst tutaj, 19 00:01:35,960 --> 00:01:37,180 więc jest 20 00:01:37,190 --> 00:01:43,010 renderowany, ale jak już powiedziałem, mając odpowiednie wypełnienie, właściwe wyrównanie, odpowiedni styl, odpowiedni rozmiar, bardzo denerwujące, 21 00:01:43,010 --> 00:01:47,870 jeśli robisz to wszystko sam, ponieważ nie tylko robisz to dla jednego urządzenia, 22 00:01:47,870 --> 00:01:49,300 ale dla wielu urządzeń. 23 00:01:49,370 --> 00:01:54,320 Dlatego właśnie tutaj zainstalujemy specjalny pakiet, który nam w tym pomoże. 24 00:01:54,320 --> 00:02:01,250 Więc na razie zakończ proces, uruchom program i użyj npm install 25 00:02:01,250 --> 00:02:10,130 - zapisz i zainstaluj pakiet React-Navigation-Header-Button, który jest pakietem, który, co zaskakujące, jeśli spojrzysz na 26 00:02:10,310 --> 00:02:16,220 nazwę, w konfiguracji niektóre przyciski w nagłówku, więc na 27 00:02:16,280 --> 00:02:24,850 górnym pasku narzędzi tutaj. Jest to pakiet, który ułatwi dodanie takich przycisków. Po dodaniu tego, zrestartuję mój serwer 28 00:02:24,850 --> 00:02:30,490 programistyczny z npm start, a teraz sam utworzę nowy komponent pomocnika w folderze komponentów, który 29 00:02:30,490 --> 00:02:37,290 nazwiebym helper, przycisk nagłówka, a nie helper, przycisk nagłówka. Tam zaimportuję React z 30 00:02:37,300 --> 00:02:44,210 React, ponieważ będzie to normalny komponent React, który tam 31 00:02:44,570 --> 00:02:51,980 utworzymy i zaimportuję coś z nowego właśnie zainstalowanego pakietu React-Navigation-Header-Button, 32 00:02:51,980 --> 00:03:02,650 a czymś, co importuję, jest przyciskiem nagłówka. Poza tym, zaimportujmy też coś z @ expo / vector-icons, które powinno 33 00:03:02,680 --> 00:03:08,830 być dostępne, ale dla bezpieczeństwa, na pewno możesz również uruchomić npm install - save 34 00:03:08,830 --> 00:03:16,270 @ expo / vector-icons, aby zainstalować ten pakiet, ponieważ „ Potrzebuję tego, a rzeczą, którą musimy zaimportować 35 00:03:19,050 --> 00:03:24,630 z tego pakietu, są jony. Oczywiście możesz użyć dowolnego zestawu ikon, 36 00:03:24,630 --> 00:03:30,270 omówiłem ikony wcześniej w tym kursie i możesz swobodnie używać dowolnej ikony w przycisku 37 00:03:30,270 --> 00:03:35,250 nagłówka, po prostu będę pracować z jonami, ponieważ używam ich w pozostałych 38 00:03:35,460 --> 00:03:40,440 ten kurs również, ale znowu, możesz użyć dowolnych ikon i oczywiście w 39 00:03:40,440 --> 00:03:45,900 nagłówku nie musisz używać ikon, możesz również użyć innego tekstu, ale zazwyczaj używasz ikon, 40 00:03:45,900 --> 00:03:49,470 oczywiście, to użytkownicy zwykle są przyzwyczajeni z innych aplikacji. 41 00:03:49,740 --> 00:03:58,040 Ponadto zaimportuję kolory ze stałych / kolorów, a teraz utworzę tutaj mój komponent, to jest, powiedzmy, niestandardowy przycisk nagłówka 42 00:03:58,070 --> 00:04:04,850 lub przycisk nagłówka, cokolwiek chcesz nazwać, ale już to importujemy, więc muszę wybrać inną nazwę 43 00:04:05,030 --> 00:04:09,290 tutaj, aby nie doszło do konfliktu nazw, a to 44 00:04:09,650 --> 00:04:17,390 otrzyma kilka rekwizytów i zwróci przycisk nagłówka, który otrzymujemy z tego pakietu, który zainstalowaliśmy, ale wkrótce dodamy 45 00:04:17,390 --> 00:04:22,280 dodatkową konfigurację, dlatego jestem zawijam to w osobny komponent, abyśmy nie 46 00:04:22,280 --> 00:04:27,800 musieli powtarzać tej konfiguracji dla każdego przycisku, którego używamy w dowolnym miejscu 47 00:04:27,800 --> 00:04:28,990 w aplikacji, 48 00:04:29,140 --> 00:04:33,250 a następnie oczywiście wyeksportuję mój domyślny niestandardowy przycisk nagłówka. 49 00:04:33,340 --> 00:04:39,850 Więc teraz ten przycisk nagłówka używam tutaj z tego pakietu, który zainstalowaliśmy, który przede wszystkim otrzyma wszystkie rekwizyty, 50 00:04:39,850 --> 00:04:45,790 które otrzymujemy dzięki tej fajnej sztuczce, której możemy użyć w React, gdzie przekazujemy wszystkie rekwizyty za 51 00:04:45,790 --> 00:04:51,700 pomocą tego skrótu, wyciągając wszystkie pary klucz-wartość i przekazanie ich do tego obiektu, którym jest ten 52 00:04:51,700 --> 00:04:53,060 komponent na końcu. 53 00:04:53,110 --> 00:04:56,790 Więc to jest pierwsza rzecz, musimy przesłać wszystkie rekwizyty i to jest bardzo 54 00:04:56,800 --> 00:04:57,670 ważne, nie 55 00:04:57,670 --> 00:05:00,470 zapominaj o tym, bo inaczej nie będzie działać poprawnie. 56 00:05:00,490 --> 00:05:07,540 Drugim krokiem jest dodanie rekwizytu komponentu Icon z dużym I, czyli rekwizyt, którego oczekuje przycisk nagłówka, który otrzymujemy 57 00:05:07,540 --> 00:05:13,580 z tego pakietu, i tam przekazuję jony. Oczekuje to, że pakiet ikon 58 00:05:13,580 --> 00:05:20,730 wektorowych może być używany do renderowania ikon, nie musi być jonowy, ale musi pochodzić z 59 00:05:20,730 --> 00:05:27,800 @ expo / vector-icons lub z bazowego pakietu ikon wektorowych React Native, na którym oparty 60 00:05:27,800 --> 00:05:34,850 jest pakiet expo i możesz także parsować rozmiar ikony, a ja go znormalizuję, tak 61 00:05:34,850 --> 00:05:40,370 aby wszystkie moje przyciski nagłówka w całej aplikacji miały ten sam 62 00:05:40,370 --> 00:05:48,470 rozmiar 23, co moim zdaniem działa całkiem dobrze. Na koniec ustawię tutaj również kolor i użyję 63 00:05:49,160 --> 00:05:59,360 mojego podstawowego koloru, choć oczywiście musimy upewnić się, że różnicujemy według platformy. Więc zaimportuję również platformę z React Native, ponieważ na 64 00:05:59,390 --> 00:06:06,210 Androidzie nasz nagłówek będzie miał podstawowy kolor jako tło, więc tam chcemy użyć 65 00:06:06,210 --> 00:06:08,000 koloru ikony białego. 66 00:06:08,150 --> 00:06:15,320 Więc tutaj sprawdzę platformę. os, jeśli jest to równe Androidowi, chcę tutaj użyć bieli i 67 00:06:15,360 --> 00:06:18,350 tylko jeśli jest to iOS, chcę użyć podstawowego koloru. 68 00:06:18,470 --> 00:06:21,020 Więc teraz mamy ten wstępnie skonfigurowany przycisk nagłówka, 69 00:06:21,020 --> 00:06:26,840 teraz możemy go użyć w miejscu, w komponencie, w którym chcemy dodać go do naszego nagłówka, w 70 00:06:26,840 --> 00:06:31,030 tym przypadku jest to MealDetailScreen. Tam musimy teraz zaimportować 71 00:06:31,120 --> 00:06:34,520 coś innego z nowo zainstalowanego pakietu, więc z przycisków 72 00:06:34,720 --> 00:06:41,140 reagowania-nawigacji-nagłówka z tego pakietu musimy zainstalować lub zaimportować przyciski nagłówka, a nie przycisk nagłówka, którego używamy 73 00:06:41,140 --> 00:06:47,710 w innym pliku ale przyciski nagłówka, liczba mnoga. Dodajemy to tutaj, ponieważ teraz 74 00:06:47,770 --> 00:06:53,650 tam, gdzie ustawiliśmy opcje nawigacji dla tego komponentu, zamiast używać tam naszego 75 00:06:53,650 --> 00:06:58,200 komponentu tekstowego, chcę użyć przycisków nagłówka, tego komponentu, dla 76 00:06:58,250 --> 00:07:04,940 którego właśnie dodałem import i owiń go wokół innego elementu, który mamy importować 77 00:07:04,960 --> 00:07:11,940 z przycisków reagowania-nawigacji-nagłówka i to jest pozycja. Przedmiot jest kolejnym importowanym przez nas 78 00:07:12,090 --> 00:07:16,710 komponentem, którego możemy teraz używać między tagami otwierającymi 79 00:07:16,710 --> 00:07:26,600 i zamykającymi przycisków nagłówka, więc tutaj dodajemy element, a przedmiot jest składnikiem samozamykającym, w którym opisujemy ikonę, którą 80 00:07:26,600 --> 00:07:31,970 chcemy renderować na końcu. Możemy również nadać temu tytuł, który byłby renderowany 81 00:07:32,000 --> 00:07:35,170 jako rezerwowy, a ja nazwiemy tego faworyta, ale normalnie go 82 00:07:35,180 --> 00:07:37,670 nie zobaczymy, zamiast tego mogę tutaj ustawić 83 00:07:37,670 --> 00:07:46,280 nazwę ikony, a teraz powinno to być na przykład ios- gwiazda, która jest prawidłową ikoną jonową i możesz przeszukać tę listę @ expo / vector-icons, którą 84 00:07:46,280 --> 00:07:51,440 pokazałem ci wcześniej w trakcie kursu, który również dołączasz do tego filmu, pod kątem możliwych 85 00:07:51,440 --> 00:07:53,570 ikon, których możesz tu użyć. 86 00:07:53,570 --> 00:07:59,540 Upewnij się tylko, że używasz ikony z zestawu ikon używanych w przyciskach nagłówka, a więc 87 00:07:59,540 --> 00:08:01,990 w moim przypadku z jonowych. 88 00:08:02,000 --> 00:08:03,830 Teraz wskazuje, której ikony 89 00:08:03,830 --> 00:08:09,680 użyć, teraz tutaj możemy również dodać onPress, aby zarejestrować funkcję, która powinna zostać uruchomiona po 90 00:08:09,680 --> 00:08:12,570 naciśnięciu tej ikony lub po naciśnięciu tego elementu 91 00:08:12,650 --> 00:08:19,220 w nagłówku, a teraz powiem tutaj zaznaczenie jako ulubionego, zaloguj to w konsoli, aby zobaczyć, że to zadziałało. 92 00:08:19,220 --> 00:08:22,720 Nie jesteśmy jeszcze tam całkowicie, ponieważ nie używamy 93 00:08:22,730 --> 00:08:25,870 niestandardowego przycisku nagłówka, to ostatni brakujący element. 94 00:08:26,000 --> 00:08:28,370 Musimy zaimportować utworzony przez nas 95 00:08:28,430 --> 00:08:35,120 komponent, więc zaimportuj przycisk nagłówka z komponentów, a następnie z przycisku nagłówka, to jest przycisk, nad którym 96 00:08:35,120 --> 00:08:42,740 pracowaliśmy, i przekazujemy to do przycisków nagłówka tutaj, ponieważ oczekuje prop propozycji komponentu przycisku nagłówka w miejscu, w którym 97 00:08:42,740 --> 00:08:47,870 wskazujemy komponent, który powinien zostać użyty do renderowania tego elementu na końcu. 98 00:08:47,870 --> 00:08:52,220 To wszystko jest bardzo złożone, jak można powiedzieć, wiele zagnieżdżonych komponentów, jest to 99 00:08:52,220 --> 00:08:57,500 po prostu konfiguracja, która jest trochę kłopotliwa za pierwszym razem, ale kiedy używasz jej w innych 100 00:08:57,500 --> 00:09:01,790 komponentach, tak naprawdę chodzi tylko o kopiowanie ta sama konfiguracja tutaj, zmiana tytułu, 101 00:09:01,790 --> 00:09:05,860 zmiana ikony i zmiana logiki i jesteś tam, więc to wszystko, co 102 00:09:05,870 --> 00:09:07,970 musisz zrobić w przyszłości, to tylko 103 00:09:08,000 --> 00:09:12,740 wstępna konfiguracja, która jest tutaj dodatkową pracą. Jednak przy takiej konfiguracji, 104 00:09:12,740 --> 00:09:14,540 jeśli teraz to 105 00:09:19,710 --> 00:09:25,770 uratujemy, powinniśmy widzieć naszą gwiazdę tutaj. Jest to ikona, którą widzimy i możemy ją 106 00:09:25,770 --> 00:09:35,290 nacisnąć, a gdy ją naciskam, zobaczysz znak, że ulubiony zostanie zalogowany tutaj w konsoli. Zobaczmy też, że na Androidzie zawsze mamy 107 00:09:35,300 --> 00:09:40,150 gwiazdę, a jeśli naciśniemy tę gwiazdę, oznaczymy ją 108 00:09:40,160 --> 00:09:47,100 jako ulubioną, więc to działa. Mała uwaga, którą właśnie widziałem, jeśli mamy wiele przepisów, możemy chcieć trochę dodatkowej stylizacji, zupełnie niezwiązanej 109 00:09:47,100 --> 00:09:52,470 z przyciskiem nagłówka, po prostu to widząc. Więc w MealItem. Plik js, na pozycji 110 00:09:52,470 --> 00:09:56,460 posiłku, rzeczywiście dodam margines w pionie 10, znowu, zupełnie nie jest 111 00:09:56,520 --> 00:10:02,520 to coś, czego potrzebujesz, tylko tam, aby upewnić się, że wygląda to ładniej, jeśli mamy wiele 112 00:10:02,520 --> 00:10:03,050 przedmiotów. 113 00:10:03,060 --> 00:10:08,670 Ważną rzeczą tutaj jest oczywiście to, że mamy przycisk nagłówka, tę ikonę i w ten 114 00:10:09,180 --> 00:10:13,100 sposób możesz dodawać przyciski lub elementy ikon tutaj do nagłówka i 115 00:10:13,170 --> 00:10:18,570 oczywiście możesz dodać więcej niż jeden. Tutaj, na ekranie szczegółów posiłku, możesz 116 00:10:18,600 --> 00:10:24,770 mieć wiele takich pozycji między przyciskami nagłówka, które ustawiłeś w nagłówku Prawo w opcjach nawigacji. 117 00:10:24,850 --> 00:10:26,220 W ten sposób dodajesz 118 00:10:26,220 --> 00:10:33,750 tutaj elementy, możesz mieć więcej niż jeden, na przykład tutaj możemy również mieć kontur ios-star, który jest kolejną ikoną, która wygląda 119 00:10:33,750 --> 00:10:37,260 nieco inaczej, abyśmy mogli zobaczyć różnicę tutaj, teraz mamy 120 00:10:37,260 --> 00:10:38,630 dwie tutaj . 121 00:10:38,790 --> 00:10:45,600 Jest to możliwe, oczywiście, nie powinieneś przeciążać tego, aby Twój interfejs pozostał czysty i po prostu działał, 122 00:10:46,710 --> 00:10:55,010 ale w ten sposób możesz dodawać ikony tutaj na ekranie. Nawiasem mówiąc, otrzymuję ostrzeżenie dotyczące podwójnych kluczy, tytuł tutaj służy również 123 00:10:55,010 --> 00:10:59,910 jako klucz do twoich przedmiotów, więc jeśli masz wiele przedmiotów, nie powinieneś używać 124 00:10:59,930 --> 00:11:03,350 tego samego tytułu, ale właśnie dodałem to dla 125 00:11:03,350 --> 00:11:08,640 i tak w celach demonstracyjnych, więc po prostu się go pozbędę i będziemy dobrze. 126 00:11:08,810 --> 00:11:12,290 Teraz nasza ikona gwiazdki nic jeszcze nie robi, dodamy to 127 00:11:12,320 --> 00:11:17,660 później, ale przynajmniej to widzimy i jest to bardzo ważne w module, w którym mówimy 128 00:11:17,660 --> 00:11:20,300 o nawigacji i pracy z nagłówkiem.