Wyodrębniamy naszą kategorię tutaj w naszym komponencie, ponieważ otrzymujemy nasz parametr za
pomocą rekwizytów nawigacyjnych.
Teraz jednak chcę wypisać tytuł w nagłówku.
Teraz nauczyłeś się, jak skonfigurować ten nagłówek za pomocą opcji nawigacyjnych, więc na
ekranie komponentu kategorii posiłków, a zatem jest to funkcja, dlatego jest to obiekt, możemy dodać opcje
nawigacji i dowiedziałeś się, że jest to Obiekt Javascript, w którym
możesz ustawić tytuł nagłówka, a tytuł nagłówka powinien być teraz moją nazwą kategorii.
Problem polega na tym, że tutaj wybrana kategoria jest dostępna, ale jest to funkcja składowa.
Z drugiej strony oczywiście nie jest to coś, do czego możemy uzyskać dostęp, ponieważ dzieje się to
po definicji funkcji.
Więc nie mamy dostępu do kategorii, którą tam
zidentyfikowaliśmy, to problem.
Dobrą rzeczą jest to, że opcje nawigacji mogą być obiektem, jeśli masz statyczne zakodowane wartości konfiguracji, ale może
także być funkcją, jeśli potrzebujesz dynamicznej konfiguracji, która zależy od zmiany danych i oczywiście dane, na których
polegamy, zmieniają się, ponieważ „ ponownie używam tego samego ekranu dla różnych
kategorii, dlatego identyfikator i tytuł kategorii zmieniają się za każdym razem, gdy korzystamy
z tego ekranu. Raz użyjemy go do
kategorii włoskiej, następnym razem użyjemy go do kategorii egzotycznej. Ta funkcja, której możesz także użyć, jest
oczywiście obsługiwana przez nawigację React,
a jeśli jest to funkcja, którą przekazujesz opcjom nawigacji, nawigacja React wywoła
ją za Ciebie i przekaże niektóre dane nawigacyjne, więc będzie przekaż obiekt z pewnymi danymi, które powinny ci pomóc,
za chwilę zobaczymy, co tam jest, ponieważ możemy po prostu zapisać tutaj te dane
nawigacyjne.
Zacznijmy od tego, przejdźmy
teraz do tej strony i zobaczmy, co tam jest.
Jeśli rozwinę to tutaj, to dziennik, który dostałem i zobaczysz,
że mamy inny rekwizyt nawigacyjny w danych nawigacyjnych. Tam mamy działania, nawigujemy pop, push, czyli
w
zasadzie to, co wiedzieliśmy. Mamy tam również
getParam, co powinno być przydatne, ponieważ pozwoli nam to wyodrębnić dane tutaj w naszych
opcjach nawigacji, co powinno być bardzo pomocne. Tak więc w końcu otrzymujemy ten sam rekwizyt nawigacyjny, który mamy również na naszych rekwizytach składowych.
Więc tutaj możemy teraz korzystać z navigationData. nawigacja. getParam, aby uzyskać identyfikator mojej kategorii, dokładnie
to, co zrobiliśmy w komponencie. Możemy więc powtórzyć kod, który mieliśmy w komponencie
i uzyskać wybraną kategorię, nie tylko w komponencie, ale teraz także w tej funkcji, której używamy do konfigurowania naszych opcji nawigacji.
Mamy teraz dostęp do wybranej kategorii, a teraz opcje nawigacji, ta funkcja,
jeśli jest funkcją, powinna oczywiście zwrócić obiekt z opcjami nawigacji.
Więc to, co wcześniej bezpośrednio ustawiliśmy jako opcje nawigacji, kiedy mieliśmy tylko zapisane na stałe wartości,
teraz
musi zostać zwrócone, ale teraz możemy tutaj wykorzystać te dynamicznie wyprowadzane dane lub dynamicznie wyprowadzane informacje.
Więc teraz możemy nadal ustawić tytuł nagłówka, a tytuł nagłówka można teraz wybrać
Kategoria. tytuł.
W ten sposób możemy dynamicznie czerpać to i dlatego teraz, jeśli wrócisz, zobaczysz
tutaj włoski, zobaczysz tutaj szybki i łatwy, zobaczysz niemiecki, a to po prostu działa.
Należy pamiętać, że domyślnie wyświetlany jest również tekst przycisku Wstecz, który jest tytułem poprzedniego ekranu, to kolejna
domyślna funkcja, którą oferuje nawigacja React. Wracamy do kategorii posiłków, ponieważ pochodzimy
z kategorii posiłków. Tylko w przypadku szybkiego i łatwego,
gdy byłby to zbyt długi obok tego nieco dłuższego tytułu, cofa się i domyślnie przywraca do tyłu, co jest dobrym domyślnym
zachowaniem, które można zastąpić, ale z którego jestem zadowolony. Na Androidzie nie mamy tylnego tekstu, ale
oczywiście mamy przycisk Wstecz, a tam nagłówek jest również wypełniany poprawnie dla załadowanych ekranów.
W ten sposób możemy również dynamicznie pozyskiwać nasze dane tutaj w opcjach nawigacji. Jednym z problemów, który możesz zauważyć, który jest
najbardziej widoczny tutaj na Androidzie, jest to, że nagłówek na nowym ekranie, który ładujemy, nie ma tej samej
stylistyki, co nasz nagłówek tutaj, nie ma koloru tła, a mianowicie. Teraz można to łatwo naprawić, ponieważ w
opcjach nawigacji kategorii posiłków możemy po prostu wprowadzić styl nagłówka i kolor odcienia nagłówka, które
ustawiliśmy tutaj również na drugim ekranie. Możemy więc skopiować to tutaj, a
to oznacza po prostu, że musimy zaimportować interfejs API platformy i, oczywiście, nasz stały kolor, więc importuj
kolory ze stałych / kolorów takich, a kiedy to zrobimy, zobaczymy, że jeśli tam pójdziemy , mamy teraz taki sam styl nagłówka dla tej nowej strony,
co jest oczywiście tym, czego zwykle chcesz. Zwykle nie chcesz jednak kopiować tej samej
konfiguracji na każdy ekran, ponieważ w tej aplikacji nie mamy tylu ekranów, z pewnością
możemy to zrobić, ale w większych aplikacjach, w których masz więcej ekranów,
byłoby bardzo irytujące i bardzo kłopotliwe, więc zdecydowanie nie jest to dobry sposób, aby tam pójść.
Spójrzmy więc na alternatywę w następnym wykładzie.