Dodanie przycisku do nagłówka, tak jak chcę, tutaj, taki przycisk nawigacyjny, wymaga
początkowo trochę dodatkowej pracy, ale później jest bardzo prosty.
Musimy przede wszystkim zainstalować dodatkowy pakiet, aby to ułatwić, ponieważ teoretycznie masz
tutaj dużą moc.
Możesz dodawać takie przyciski za pomocą opcji nawigacji,
więc tutaj w MealDetailScreen, oprócz ustawiania tytułu nagłówka, możesz ustawić headerLeft i headerRight, aby dodać
przyciski po lewej i prawej stronie tytułu.
Zwykle chcesz używać prawej, ponieważ lewy jest zarezerwowany dla przycisku wstecz i ogólnie możesz
po prostu zwrócić tam element jsx,
więc możesz po prostu ustawić go na tekst, jak ulubiony, to jest coś, co możesz zrobić tutaj i
faktycznie pozwolić mi pokaż to i zrestartuj serwer, zanim użyjemy pakietu,
ponieważ chociaż możesz po prostu dodać tutaj komponent, poprawiając stylizację, odpowiednie pozycjonowanie dla wszystkich różnych platform, szczególnie
jeśli nie używasz tu tylko tekstu, ale także może ikona, którą zwykle chcesz tam mieć,
co może być naprawdę kłopotliwe i dlatego zainstalujemy dodatkowy pakiet, który ułatwi to
w inny sposób niż jest w innym przypadku.
Więc pozwól mi zrestartować to z npm start, nie instaluj npm, npm start i
przy ponownym uruchomieniu, przeładujmy to tutaj na iOS i pokażę ci, co mamy teraz, gdy renderuję tekst.
Widzisz ten tekst tutaj,
więc jest
renderowany, ale jak już powiedziałem, mając odpowiednie wypełnienie, właściwe wyrównanie, odpowiedni styl, odpowiedni rozmiar, bardzo denerwujące,
jeśli robisz to wszystko sam, ponieważ nie tylko robisz to dla jednego urządzenia,
ale dla wielu urządzeń.
Dlatego właśnie tutaj zainstalujemy specjalny pakiet, który nam w tym pomoże.
Więc na razie zakończ proces, uruchom program i użyj npm install
- zapisz i zainstaluj pakiet React-Navigation-Header-Button, który jest pakietem, który, co zaskakujące, jeśli spojrzysz na
nazwę, w konfiguracji niektóre przyciski w nagłówku, więc na
górnym pasku narzędzi tutaj. Jest to pakiet, który ułatwi dodanie takich przycisków. Po dodaniu tego, zrestartuję mój serwer
programistyczny z npm start, a teraz sam utworzę nowy komponent pomocnika w folderze komponentów, który
nazwiebym helper, przycisk nagłówka, a nie helper, przycisk nagłówka. Tam zaimportuję React z
React, ponieważ będzie to normalny komponent React, który tam
utworzymy i zaimportuję coś z nowego właśnie zainstalowanego pakietu React-Navigation-Header-Button,
a czymś, co importuję, jest przyciskiem nagłówka. Poza tym, zaimportujmy też coś z @ expo / vector-icons, które powinno
być dostępne, ale dla bezpieczeństwa, na pewno możesz również uruchomić npm install - save
@ expo / vector-icons, aby zainstalować ten pakiet, ponieważ „ Potrzebuję tego, a rzeczą, którą musimy zaimportować
z tego pakietu, są jony. Oczywiście możesz użyć dowolnego zestawu ikon,
omówiłem ikony wcześniej w tym kursie i możesz swobodnie używać dowolnej ikony w przycisku
nagłówka, po prostu będę pracować z jonami, ponieważ używam ich w pozostałych
ten kurs również, ale znowu, możesz użyć dowolnych ikon i oczywiście w
nagłówku nie musisz używać ikon, możesz również użyć innego tekstu, ale zazwyczaj używasz ikon,
oczywiście, to użytkownicy zwykle są przyzwyczajeni z innych aplikacji.
Ponadto zaimportuję kolory ze stałych / kolorów, a teraz utworzę tutaj mój komponent, to jest, powiedzmy, niestandardowy przycisk nagłówka
lub przycisk nagłówka, cokolwiek chcesz nazwać, ale już to importujemy, więc muszę wybrać inną nazwę
tutaj, aby nie doszło do konfliktu nazw, a to
otrzyma kilka rekwizytów i zwróci przycisk nagłówka, który otrzymujemy z tego pakietu, który zainstalowaliśmy, ale wkrótce dodamy
dodatkową konfigurację, dlatego jestem zawijam to w osobny komponent, abyśmy nie
musieli powtarzać tej konfiguracji dla każdego przycisku, którego używamy w dowolnym miejscu
w aplikacji,
a następnie oczywiście wyeksportuję mój domyślny niestandardowy przycisk nagłówka.
Więc teraz ten przycisk nagłówka używam tutaj z tego pakietu, który zainstalowaliśmy, który przede wszystkim otrzyma wszystkie rekwizyty,
które otrzymujemy dzięki tej fajnej sztuczce, której możemy użyć w React, gdzie przekazujemy wszystkie rekwizyty za
pomocą tego skrótu, wyciągając wszystkie pary klucz-wartość i przekazanie ich do tego obiektu, którym jest ten
komponent na końcu.
Więc to jest pierwsza rzecz, musimy przesłać wszystkie rekwizyty i to jest bardzo
ważne, nie
zapominaj o tym, bo inaczej nie będzie działać poprawnie.
Drugim krokiem jest dodanie rekwizytu komponentu Icon z dużym I, czyli rekwizyt, którego oczekuje przycisk nagłówka, który otrzymujemy
z tego pakietu, i tam przekazuję jony. Oczekuje to, że pakiet ikon
wektorowych może być używany do renderowania ikon, nie musi być jonowy, ale musi pochodzić z
@ expo / vector-icons lub z bazowego pakietu ikon wektorowych React Native, na którym oparty
jest pakiet expo i możesz także parsować rozmiar ikony, a ja go znormalizuję, tak
aby wszystkie moje przyciski nagłówka w całej aplikacji miały ten sam
rozmiar 23, co moim zdaniem działa całkiem dobrze. Na koniec ustawię tutaj również kolor i użyję
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
Androidzie nasz nagłówek będzie miał podstawowy kolor jako tło, więc tam chcemy użyć
koloru ikony białego.
Więc tutaj sprawdzę platformę. os, jeśli jest to równe Androidowi, chcę tutaj użyć bieli i
tylko jeśli jest to iOS, chcę użyć podstawowego koloru.
Więc teraz mamy ten wstępnie skonfigurowany przycisk nagłówka,
teraz możemy go użyć w miejscu, w komponencie, w którym chcemy dodać go do naszego nagłówka, w
tym przypadku jest to MealDetailScreen. Tam musimy teraz zaimportować
coś innego z nowo zainstalowanego pakietu, więc z przycisków
reagowania-nawigacji-nagłówka z tego pakietu musimy zainstalować lub zaimportować przyciski nagłówka, a nie przycisk nagłówka, którego używamy
w innym pliku ale przyciski nagłówka, liczba mnoga. Dodajemy to tutaj, ponieważ teraz
tam, gdzie ustawiliśmy opcje nawigacji dla tego komponentu, zamiast używać tam naszego
komponentu tekstowego, chcę użyć przycisków nagłówka, tego komponentu, dla
którego właśnie dodałem import i owiń go wokół innego elementu, który mamy importować
z przycisków reagowania-nawigacji-nagłówka i to jest pozycja. Przedmiot jest kolejnym importowanym przez nas
komponentem, którego możemy teraz używać między tagami otwierającymi
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ą
chcemy renderować na końcu. Możemy również nadać temu tytuł, który byłby renderowany
jako rezerwowy, a ja nazwiemy tego faworyta, ale normalnie go
nie zobaczymy, zamiast tego mogę tutaj ustawić
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ą
pokazałem ci wcześniej w trakcie kursu, który również dołączasz do tego filmu, pod kątem możliwych
ikon, których możesz tu użyć.
Upewnij się tylko, że używasz ikony z zestawu ikon używanych w przyciskach nagłówka, a więc
w moim przypadku z jonowych.
Teraz wskazuje, której ikony
użyć, teraz tutaj możemy również dodać onPress, aby zarejestrować funkcję, która powinna zostać uruchomiona po
naciśnięciu tej ikony lub po naciśnięciu tego elementu
w nagłówku, a teraz powiem tutaj zaznaczenie jako ulubionego, zaloguj to w konsoli, aby zobaczyć, że to zadziałało.
Nie jesteśmy jeszcze tam całkowicie, ponieważ nie używamy
niestandardowego przycisku nagłówka, to ostatni brakujący element.
Musimy zaimportować utworzony przez nas
komponent, więc zaimportuj przycisk nagłówka z komponentów, a następnie z przycisku nagłówka, to jest przycisk, nad którym
pracowaliśmy, i przekazujemy to do przycisków nagłówka tutaj, ponieważ oczekuje prop propozycji komponentu przycisku nagłówka w miejscu, w którym
wskazujemy komponent, który powinien zostać użyty do renderowania tego elementu na końcu.
To wszystko jest bardzo złożone, jak można powiedzieć, wiele zagnieżdżonych komponentów, jest to
po prostu konfiguracja, która jest trochę kłopotliwa za pierwszym razem, ale kiedy używasz jej w innych
komponentach, tak naprawdę chodzi tylko o kopiowanie ta sama konfiguracja tutaj, zmiana tytułu,
zmiana ikony i zmiana logiki i jesteś tam, więc to wszystko, co
musisz zrobić w przyszłości, to tylko
wstępna konfiguracja, która jest tutaj dodatkową pracą. Jednak przy takiej konfiguracji,
jeśli teraz to
uratujemy, powinniśmy widzieć naszą gwiazdę tutaj. Jest to ikona, którą widzimy i możemy ją
nacisnąć, a gdy ją naciskam, zobaczysz znak, że ulubiony zostanie zalogowany tutaj w konsoli. Zobaczmy też, że na Androidzie zawsze mamy
gwiazdę, a jeśli naciśniemy tę gwiazdę, oznaczymy ją
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
z przyciskiem nagłówka, po prostu to widząc. Więc w MealItem. Plik js, na pozycji
posiłku, rzeczywiście dodam margines w pionie 10, znowu, zupełnie nie jest
to coś, czego potrzebujesz, tylko tam, aby upewnić się, że wygląda to ładniej, jeśli mamy wiele
przedmiotów.
Ważną rzeczą tutaj jest oczywiście to, że mamy przycisk nagłówka, tę ikonę i w ten
sposób możesz dodawać przyciski lub elementy ikon tutaj do nagłówka i
oczywiście możesz dodać więcej niż jeden. Tutaj, na ekranie szczegółów posiłku, możesz
mieć wiele takich pozycji między przyciskami nagłówka, które ustawiłeś w nagłówku Prawo w opcjach nawigacji.
W ten sposób dodajesz
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
nieco inaczej, abyśmy mogli zobaczyć różnicę tutaj, teraz mamy
dwie tutaj .
Jest to możliwe, oczywiście, nie powinieneś przeciążać tego, aby Twój interfejs pozostał czysty i po prostu działał,
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ż
jako klucz do twoich przedmiotów, więc jeśli masz wiele przedmiotów, nie powinieneś używać
tego samego tytułu, ale właśnie dodałem to dla
i tak w celach demonstracyjnych, więc po prostu się go pozbędę i będziemy dobrze.
Teraz nasza ikona gwiazdki nic jeszcze nie robi, dodamy to
później, ale przynajmniej to widzimy i jest to bardzo ważne w module, w którym mówimy
o nawigacji i pracy z nagłówkiem.