1 00:00:02,250 --> 00:00:07,650 Wyodrębniamy naszą kategorię tutaj w naszym komponencie, ponieważ otrzymujemy nasz parametr za 2 00:00:07,650 --> 00:00:09,130 pomocą rekwizytów nawigacyjnych. 3 00:00:09,150 --> 00:00:12,980 Teraz jednak chcę wypisać tytuł w nagłówku. 4 00:00:13,050 --> 00:00:18,520 Teraz nauczyłeś się, jak skonfigurować ten nagłówek za pomocą opcji nawigacyjnych, więc na 5 00:00:18,630 --> 00:00:25,170 ekranie komponentu kategorii posiłków, a zatem jest to funkcja, dlatego jest to obiekt, możemy dodać opcje 6 00:00:25,530 --> 00:00:30,300 nawigacji i dowiedziałeś się, że jest to Obiekt Javascript, w którym 7 00:00:30,300 --> 00:00:35,670 możesz ustawić tytuł nagłówka, a tytuł nagłówka powinien być teraz moją nazwą kategorii. 8 00:00:35,700 --> 00:00:43,910 Problem polega na tym, że tutaj wybrana kategoria jest dostępna, ale jest to funkcja składowa. 9 00:00:43,910 --> 00:00:49,670 Z drugiej strony oczywiście nie jest to coś, do czego możemy uzyskać dostęp, ponieważ dzieje się to 10 00:00:49,670 --> 00:00:50,990 po definicji funkcji. 11 00:00:51,350 --> 00:00:55,150 Więc nie mamy dostępu do kategorii, którą tam 12 00:00:55,220 --> 00:00:56,920 zidentyfikowaliśmy, to problem. 13 00:00:56,930 --> 00:01:04,390 Dobrą rzeczą jest to, że opcje nawigacji mogą być obiektem, jeśli masz statyczne zakodowane wartości konfiguracji, ale może 14 00:01:05,000 --> 00:01:11,990 także być funkcją, jeśli potrzebujesz dynamicznej konfiguracji, która zależy od zmiany danych i oczywiście dane, na których 15 00:01:12,020 --> 00:01:17,300 polegamy, zmieniają się, ponieważ „ ponownie używam tego samego ekranu dla różnych 16 00:01:17,300 --> 00:01:22,820 kategorii, dlatego identyfikator i tytuł kategorii zmieniają się za każdym razem, gdy korzystamy 17 00:01:22,820 --> 00:01:26,140 z tego ekranu. Raz użyjemy go do 18 00:01:26,140 --> 00:01:32,360 kategorii włoskiej, następnym razem użyjemy go do kategorii egzotycznej. Ta funkcja, której możesz także użyć, jest 19 00:01:32,360 --> 00:01:34,700 oczywiście obsługiwana przez nawigację React, 20 00:01:34,700 --> 00:01:40,220 a jeśli jest to funkcja, którą przekazujesz opcjom nawigacji, nawigacja React wywoła 21 00:01:40,220 --> 00:01:48,740 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, 22 00:01:48,740 --> 00:01:54,800 za chwilę zobaczymy, co tam jest, ponieważ możemy po prostu zapisać tutaj te dane 23 00:01:54,800 --> 00:01:55,850 nawigacyjne. 24 00:01:55,970 --> 00:01:57,610 Zacznijmy od tego, przejdźmy 25 00:01:57,710 --> 00:02:01,210 teraz do tej strony i zobaczmy, co tam jest. 26 00:02:01,310 --> 00:02:05,850 Jeśli rozwinę to tutaj, to dziennik, który dostałem i zobaczysz, 27 00:02:05,850 --> 00:02:14,570 że mamy inny rekwizyt nawigacyjny w danych nawigacyjnych. Tam mamy działania, nawigujemy pop, push, czyli 28 00:02:14,580 --> 00:02:15,390 w 29 00:02:15,390 --> 00:02:20,010 zasadzie to, co wiedzieliśmy. Mamy tam również 30 00:02:20,010 --> 00:02:28,050 getParam, co powinno być przydatne, ponieważ pozwoli nam to wyodrębnić dane tutaj w naszych 31 00:02:28,110 --> 00:02:36,880 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. 32 00:02:37,040 --> 00:02:48,110 Więc tutaj możemy teraz korzystać z navigationData. nawigacja. getParam, aby uzyskać identyfikator mojej kategorii, dokładnie 33 00:02:48,110 --> 00:02:54,660 to, co zrobiliśmy w komponencie. Możemy więc powtórzyć kod, który mieliśmy w komponencie 34 00:02:54,660 --> 00:03:02,020 i uzyskać wybraną kategorię, nie tylko w komponencie, ale teraz także w tej funkcji, której używamy do konfigurowania naszych opcji nawigacji. 35 00:03:02,040 --> 00:03:08,130 Mamy teraz dostęp do wybranej kategorii, a teraz opcje nawigacji, ta funkcja, 36 00:03:08,220 --> 00:03:13,460 jeśli jest funkcją, powinna oczywiście zwrócić obiekt z opcjami nawigacji. 37 00:03:13,470 --> 00:03:19,860 Więc to, co wcześniej bezpośrednio ustawiliśmy jako opcje nawigacji, kiedy mieliśmy tylko zapisane na stałe wartości, 38 00:03:19,860 --> 00:03:20,550 teraz 39 00:03:20,610 --> 00:03:26,950 musi zostać zwrócone, ale teraz możemy tutaj wykorzystać te dynamicznie wyprowadzane dane lub dynamicznie wyprowadzane informacje. 40 00:03:26,970 --> 00:03:33,600 Więc teraz możemy nadal ustawić tytuł nagłówka, a tytuł nagłówka można teraz wybrać 41 00:03:33,720 --> 00:03:35,450 Kategoria. tytuł. 42 00:03:35,510 --> 00:03:41,300 W ten sposób możemy dynamicznie czerpać to i dlatego teraz, jeśli wrócisz, zobaczysz 43 00:03:41,300 --> 00:03:47,420 tutaj włoski, zobaczysz tutaj szybki i łatwy, zobaczysz niemiecki, a to po prostu działa. 44 00:03:47,420 --> 00:03:55,280 Należy pamiętać, że domyślnie wyświetlany jest również tekst przycisku Wstecz, który jest tytułem poprzedniego ekranu, to kolejna 45 00:03:55,280 --> 00:04:01,130 domyślna funkcja, którą oferuje nawigacja React. Wracamy do kategorii posiłków, ponieważ pochodzimy 46 00:04:01,130 --> 00:04:05,720 z kategorii posiłków. Tylko w przypadku szybkiego i łatwego, 47 00:04:05,720 --> 00:04:13,010 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 48 00:04:13,010 --> 00:04:19,400 zachowaniem, które można zastąpić, ale z którego jestem zadowolony. Na Androidzie nie mamy tylnego tekstu, ale 49 00:04:19,400 --> 00:04:25,340 oczywiście mamy przycisk Wstecz, a tam nagłówek jest również wypełniany poprawnie dla załadowanych ekranów. 50 00:04:26,240 --> 00:04:32,030 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 51 00:04:32,030 --> 00:04:37,430 najbardziej widoczny tutaj na Androidzie, jest to, że nagłówek na nowym ekranie, który ładujemy, nie ma tej samej 52 00:04:37,700 --> 00:04:44,450 stylistyki, co nasz nagłówek tutaj, nie ma koloru tła, a mianowicie. Teraz można to łatwo naprawić, ponieważ w 53 00:04:44,480 --> 00:04:51,620 opcjach nawigacji kategorii posiłków możemy po prostu wprowadzić styl nagłówka i kolor odcienia nagłówka, które 54 00:04:51,620 --> 00:04:58,250 ustawiliśmy tutaj również na drugim ekranie. Możemy więc skopiować to tutaj, a 55 00:04:58,250 --> 00:05:06,200 to oznacza po prostu, że musimy zaimportować interfejs API platformy i, oczywiście, nasz stały kolor, więc importuj 56 00:05:06,550 --> 00:05:18,730 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, 57 00:05:18,730 --> 00:05:25,570 co jest oczywiście tym, czego zwykle chcesz. Zwykle nie chcesz jednak kopiować tej samej 58 00:05:25,600 --> 00:05:31,300 konfiguracji na każdy ekran, ponieważ w tej aplikacji nie mamy tylu ekranów, z pewnością 59 00:05:31,300 --> 00:05:36,070 możemy to zrobić, ale w większych aplikacjach, w których masz więcej ekranów, 60 00:05:36,070 --> 00:05:42,520 byłoby bardzo irytujące i bardzo kłopotliwe, więc zdecydowanie nie jest to dobry sposób, aby tam pójść. 61 00:05:42,520 --> 00:05:44,740 Spójrzmy więc na alternatywę w następnym wykładzie.