1 00:00:02,280 --> 00:00:05,200 Zacznijmy od stylizacji szuflady na ekranie filtrów, co 2 00:00:05,220 --> 00:00:06,560 nie jest trudne, 3 00:00:06,570 --> 00:00:11,080 jest to coś, co robiliśmy wcześniej. W nawigatorze filtrów tutaj 4 00:00:11,100 --> 00:00:16,500 w nawigatorze stosów musimy w końcu skonfigurować domyślne opcje nawigacji, których używamy 5 00:00:16,500 --> 00:00:24,090 również dla nawigatora ulubionych w naszym nawigatorze posiłków. Możemy więc skopiować tutaj drugi obiekt konfiguracji i dodać 6 00:00:24,090 --> 00:00:29,270 go tutaj w naszym nawigatorze filtrów jako drugi argument do utworzenia nawigatora stosu. 7 00:00:29,350 --> 00:00:31,870 Oczywiście możemy usunąć tę komentowaną 8 00:00:31,870 --> 00:00:39,220 linię, ale dzięki tej prostej zmianie upewniamy się, że używamy tego samego stylu paska nawigacji lub 9 00:00:39,220 --> 00:00:40,450 paska akcji. 10 00:00:40,450 --> 00:00:45,580 To prosta, ale przydatna zmiana, teraz dla samej szuflady, co z 11 00:00:45,580 --> 00:00:48,770 tym wyglądem tutaj i stylem szuflady? 12 00:00:48,780 --> 00:00:55,690 Teraz możesz, jeśli chcesz kontrolować całą szufladę i zmienić sposób, w jaki są tam rozmieszczone elementy, i nie korzystać z 13 00:00:55,990 --> 00:01:01,120 tego domyślnego ustawienia listy z efektem marszczenia tutaj na Androidzie i innym efektem na iOS, 14 00:01:01,120 --> 00:01:01,910 ale myślę, 15 00:01:02,050 --> 00:01:05,680 że to niezła domyślna których tak naprawdę nie chcę zmienić. 16 00:01:05,710 --> 00:01:10,930 Jeśli chcesz, możesz jednak zastąpić cały ten komponent, który jest renderowany tutaj i dołączony, znajdziesz link 17 00:01:10,930 --> 00:01:15,850 do oficjalnych dokumentów, gdzie możesz dowiedzieć się więcej na ten temat, na wypadek, gdybyś musiał 18 00:01:15,850 --> 00:01:16,510 to dostosować. 19 00:01:16,780 --> 00:01:25,050 To, co oczywiście chcę zmienić, to styl tych elementów i wyświetlany tutaj tekst. 20 00:01:25,060 --> 00:01:26,550 To nie 21 00:01:26,590 --> 00:01:32,500 jest zbyt trudne, zacznijmy od tekstu. Jako tekst, jak można powiedzieć, domyślnie pobiera tutaj 22 00:01:32,530 --> 00:01:34,550 te identyfikatory, filtry ulubionych posiłków. 23 00:01:34,570 --> 00:01:39,020 Teraz oczywiście może to zrobić, ale ulubione posiłki, to nie jest tak 24 00:01:39,040 --> 00:01:42,250 naprawdę tekst, który chcemy pokazać naszym użytkownikom. 25 00:01:42,250 --> 00:01:47,540 Dlatego chcę to zastąpić i możemy to zrobić za pomocą starych dobrych opcji 26 00:01:47,560 --> 00:01:53,920 nawigacji, które podobnie jak poprzednio za pomocą kart, w których moglibyśmy również kontrolować tekst etykiety, musimy 27 00:01:54,160 --> 00:02:00,460 ustawić na nawigatorach stosu, albo podczas tworzenia stos nawigatora, tam oprócz ustawiania domyślnych opcji nawigacji dla 28 00:02:00,460 --> 00:02:05,690 każdego ekranu w tym nawigatorze, możemy ustawić opcje nawigacji dla całego nawigatora, który 29 00:02:05,700 --> 00:02:10,510 nie jest wtedy przeznaczony dla ekranów nawigatora, ale dla nawigatora, gdy 30 00:02:10,510 --> 00:02:11,500 jest 31 00:02:11,740 --> 00:02:19,570 on używany jako ekran, który robimy tu, a potem tutaj, możemy ustawić etykietę szuflady i ustawić to na filtry z 32 00:02:19,570 --> 00:02:22,100 kilkoma wykrzyknikami, abyśmy widzieli, że to 33 00:02:22,150 --> 00:02:23,720 działa, teraz widzimy to 34 00:02:23,770 --> 00:02:27,220 tutaj, więc tutaj możemy to ustawić, jedna opcja. 35 00:02:27,220 --> 00:02:32,800 Alternatywnie tutaj, podczas tworzenia nawigatora szuflad, możemy użyć dłuższej formy, w której ustawiliśmy ekran 36 00:02:32,800 --> 00:02:38,260 i gdzie następnie skonfigurowaliśmy opcje nawigacji tutaj, a są to po prostu alternatywy, 37 00:02:38,590 --> 00:02:40,230 w których żadna z 38 00:02:40,240 --> 00:02:41,830 tych dwóch nie 39 00:02:41,980 --> 00:02:47,840 jest lepsza ani gorsza, możesz użyć jednej z je, a teraz tutaj, ustawię etykietę szuflady 40 00:02:47,840 --> 00:02:52,760 na posiłki, powiedzmy, to ma dla mnie więcej sensu niż ulubione posiłki. 41 00:02:53,600 --> 00:02:58,670 Dzięki temu po otwarciu szuflady widzę posiłki i filtry. W przypadku filtrów nie zastąpiłem teraz tytułu, 42 00:02:58,670 --> 00:03:02,100 ponieważ nie mam nic przeciwko domyślnemu pobieraniu mojego identyfikatora, ale 43 00:03:02,240 --> 00:03:04,580 w przypadku posiłków go zastąpiłem. 44 00:03:04,580 --> 00:03:08,420 A co z stylizacją, kolorem i tak dalej? 45 00:03:08,420 --> 00:03:15,020 Oczywiście można to również kontrolować. Cóż, tak jak poprzednio, na przykład w przypadku kart, 46 00:03:15,020 --> 00:03:21,260 w których moglibyśmy również przekazać drugi argument, aby utworzyć dolny nawigator kart do sterowania układem i stylem 47 00:03:21,260 --> 00:03:22,130 kart w 48 00:03:22,130 --> 00:03:28,190 ogóle, możemy zrobić to samo dla szuflady. Aby utworzyć nawigator szuflad, możemy przekazać drugi argument, 49 00:03:28,220 --> 00:03:31,320 którym jest obiekt skonfigurowany do samego nawigatora szuflad i 50 00:03:31,550 --> 00:03:33,290 tam otrzymujemy kilka opcji. 51 00:03:33,320 --> 00:03:37,880 Ponownie, oficjalne dokumenty zawierają wyczerpującą listę wszystkiego, co możesz skonfigurować, na 52 00:03:37,880 --> 00:03:42,980 przykład masz opcje zawartości, które pozwalają kontrolować zawartość w szufladzie, więc elementy szuflady 53 00:03:42,980 --> 00:03:47,730 do końca i tam, masz mnóstwo ustawienia, które możesz skonfigurować, na przykład 54 00:03:47,930 --> 00:03:53,960 możesz ustawić aktywny kolor odcienia, który ma zasadniczo na celu pokolorowanie elementu, gdy jest on aktywny, 55 00:03:54,090 --> 00:03:59,870 i tam możemy ustawić kolory, akcentować kolor, jeśli chcemy, zamiast używać tego niebieskiego domyślnego i 56 00:03:59,870 --> 00:04:00,320 dlatego 57 00:04:00,320 --> 00:04:05,170 teraz jest pomarańczowy i tak łatwo to zmienić, to wszystko, co musimy zrobić. 58 00:04:05,330 --> 00:04:08,980 Teraz, jeśli chcemy również zmienić używaną 59 00:04:09,080 --> 00:04:15,710 tam czcionkę, możemy to zrobić. Oprócz ustawienia aktywnego koloru odcienia tutaj w opcjach zawartości, 60 00:04:15,710 --> 00:04:17,120 możemy tutaj ustawić 61 00:04:17,120 --> 00:04:22,010 styl etykiety, który pobiera obiekt stylu, który zostanie zastosowany do podstawowego komponentu tekstowego w 62 00:04:22,010 --> 00:04:24,810 szufladzie, dzięki czemu możemy ustawić takie elementy, 63 00:04:24,950 --> 00:04:32,870 jak wyrównanie tekstu, jeśli chcemy lub w moim przypadku tutaj, po prostu skonfiguruj rodzinę czcionek i ustaw to, aby otwierało sans, może 64 00:04:32,870 --> 00:04:36,550 tak, nawet nie odważną wersję. Jeśli to zrobimy, wyraźnie zauważymy różnicę. 65 00:04:36,550 --> 00:04:40,790 Teraz przywrócę mu pogrubienie, bo to ładniejsze, ale żeby zobaczyć różnicę, myślę, 66 00:04:40,880 --> 00:04:42,890 że było jasne bez pogrubienia. 67 00:04:42,920 --> 00:04:44,950 Teraz używamy tutaj własnej 68 00:04:44,960 --> 00:04:47,570 czcionki, odważnej wersji i własnego koloru, 69 00:04:47,570 --> 00:04:48,530 i 70 00:04:48,530 --> 00:04:54,130 to całkiem fajne, powiedziałbym, to samo oczywiście działa również na Androidzie. 71 00:04:54,170 --> 00:04:58,460 W ten sposób możesz pracować z szufladą, jak 72 00:04:58,460 --> 00:05:01,700 również stylizować wszystko, a dzięki temu 73 00:05:01,940 --> 00:05:07,850 poznałeś główne wzorce nawigacji, które możesz dodać do swojej aplikacji za pomocą 74 00:05:07,850 --> 00:05:09,270 nawigacji React. 75 00:05:09,290 --> 00:05:15,770 Oczywiście, jak wielokrotnie podkreślałem w tym module, jest wiele do skonfigurowania, wszyscy ci nawigatorzy mają różne 76 00:05:15,770 --> 00:05:20,990 opcje nawigacji i ustawienia dla samych nawigatorów, dlatego zdecydowanie sprawdź oficjalne dokumenty 77 00:05:20,990 --> 00:05:26,060 i po prostu baw się z różnymi ustawieniami, które tam widzisz, aby 78 00:05:26,060 --> 00:05:31,820 eksperymentuj z tym, co możesz zrobić. To, co pokazałem tutaj i to, co tutaj zmieniliśmy, 79 00:05:31,820 --> 00:05:35,000 to prawdopodobnie wspólne rzeczy, które chcesz dostosować, dlatego pokazałem je tutaj, 80 00:05:35,090 --> 00:05:36,580 ale znowu jest tak 81 00:05:36,590 --> 00:05:40,950 wiele do zrobienia, zdecydowanie sprawdź oficjalne dokumenty. W przypadku tej aplikacji 82 00:05:40,970 --> 00:05:43,960 część nawigacyjna jest w zasadzie zrobiona, nie 83 00:05:43,970 --> 00:05:46,410 ma już nic więcej do dodania, 84 00:05:46,430 --> 00:05:50,360 teraz nadszedł czas, aby wrócić do ogólnego stylu, na przykład 85 00:05:50,360 --> 00:05:56,600 upewnij się, że wszędzie używamy odpowiednich czcionek, również w zakładkach i nagłówku oraz dla przykład 86 00:05:56,660 --> 00:06:00,590 również dla tekstu tutaj, którego obecnie nie jesteśmy, a 87 00:06:00,590 --> 00:06:06,050 następnie wypełnij resztę aplikacji odrobiną mięsa. Na przykład tutaj strona ze szczegółami, która w 88 00:06:06,050 --> 00:06:11,810 tej chwili ma jeszcze zawartość fikcyjną, a także nasza strona filtrów, która również zawiera tylko fikcyjną zawartość. 89 00:06:11,810 --> 00:06:14,290 Tak zrobię w pozostałej części tego 90 00:06:14,330 --> 00:06:20,330 modułu, a następnie w następnym module upewnimy się, że dodamy więcej logiki i że możemy na przykład 91 00:06:20,330 --> 00:06:25,700 oznaczyć coś jako ulubionego, a zatem możemy dodać go do ulubionych karta, która obecnie nie działa. 92 00:06:25,910 --> 00:06:30,470 Ale na razie zakończmy stylizację i dodaj resztę układu i zawartości do tej aplikacji.