1 00:00:02,400 --> 00:00:06,680 Po dodaniu kart brakuje treści na ulubionym ekranie. 2 00:00:06,740 --> 00:00:12,960 Teraz tak naprawdę nie mamy jeszcze funkcji dodawania ulubionych, jeśli klikniemy tę ikonę gwiazdki, to nic nie robi, 3 00:00:12,960 --> 00:00:13,640 a 4 00:00:13,650 --> 00:00:16,370 przy okazji, wiem, że tutaj również brakuje 5 00:00:16,380 --> 00:00:17,680 treści, dodamy to później. 6 00:00:17,880 --> 00:00:22,140 Więc kliknięcie ikony gwiazdki nic jeszcze nie robi, a my będziemy 7 00:00:22,140 --> 00:00:23,370 mogli zrobić to 8 00:00:23,490 --> 00:00:29,040 trochę później, nadal chcę zapełnić ten ulubiony ekran trochę bardziej przynajmniej niektórymi smoczymi posiłkami, które 9 00:00:29,040 --> 00:00:30,340 tam ładujemy powiedzmy, 10 00:00:30,480 --> 00:00:35,640 a przynajmniej z funkcjonalnością, aby przejść tam również do MealDetailScreen, ponieważ ostatecznie chodzi o 11 00:00:35,640 --> 00:00:39,080 to, że mamy tutaj listę posiłków, tak jak mamy 12 00:00:39,090 --> 00:00:44,460 ją tutaj po wybraniu kategorii i którą możemy dotknąć posiłek, aby przejść do strony szczegółów, 13 00:00:44,460 --> 00:00:45,620 tak jak możemy 14 00:00:45,660 --> 00:00:50,940 to zrobić w nawigatorze posiłków, więc w nawigatorze stosów posiłków powinienem powiedzieć, a zatem 15 00:00:50,940 --> 00:00:58,620 w końcu to, czego potrzebujemy dla ulubionych, dla naszej zakładki ulubionych nie jest pojedynczy ekran ale inny stos, stos dla naszych 16 00:00:58,620 --> 00:00:59,330 ulubionych 17 00:00:59,340 --> 00:01:02,750 funkcji w tej aplikacji, to jest to, czego potrzebujemy 18 00:01:02,760 --> 00:01:06,960 tutaj, to przy okazji da nam również nagłówek, którego obecnie brakuje. 19 00:01:07,470 --> 00:01:10,020 Oczywiście, nie jest to 20 00:01:10,110 --> 00:01:18,500 zbyt trudne do wdrożenia, możemy po prostu utworzyć inny nawigator stosów powyżej naszej tabScreenConfig, a to ustawi 21 00:01:18,500 --> 00:01:21,390 nawigator stosu dla naszego ulubionego stosu. 22 00:01:21,530 --> 00:01:26,630 Więc obiekt, który mijamy tutaj, musi zdefiniować wszystkie ekrany, które chcemy mieć na tym 23 00:01:26,630 --> 00:01:30,830 stosie, i to byłby sam ekran ulubionych z listą naszych ulubionych 24 00:01:30,830 --> 00:01:36,470 posiłków, a tam chcę wskazać ekran ulubionych, a następnie chcę mieć szczegóły posiłku, a ja 25 00:01:36,710 --> 00:01:42,710 wskażę na MealDetailScreen, a my już używamy MealDetailScreen tutaj w naszym nawigatorze posiłków, w naszym drugim 26 00:01:42,710 --> 00:01:44,000 nawigatorze stosów, ale to 27 00:01:44,030 --> 00:01:45,230 w porządku, 28 00:01:45,230 --> 00:01:49,030 możesz używać jednego i tego samego ekranu w różnych nawigatorach 29 00:01:49,040 --> 00:01:51,540 stosów, nie ma nic złego w że. 30 00:01:51,710 --> 00:01:58,340 Możemy więc użyć MealDetailScreen również tutaj w nawigatorze stosu ulubionych, a teraz chcę się upewnić, że 31 00:01:58,340 --> 00:02:03,550 skopiuję tutaj również moje opcje, moje domyślne opcje nawigacji, ten drugi argument 32 00:02:03,560 --> 00:02:09,170 w rzeczywistości do tworzenia nawigatora stosu, do nawigatora posiłków do moich ulubionych nawigator 33 00:02:09,170 --> 00:02:10,070 stosu. 34 00:02:10,070 --> 00:02:15,680 Więc tutaj, jako drugi argument do stworzenia nawigatora stosów, kopiuję do tego 35 00:02:15,680 --> 00:02:22,430 obiektu, w którym konfiguruję domyślne opcje nawigacji, tak że dla tego stosu mam te 36 00:02:22,430 --> 00:02:29,330 same wartości domyślne, mam ten sam styl nagłówka i dlatego oczywiście możemy również wytnij to 37 00:02:29,330 --> 00:02:39,100 stąd i usuń stąd i zapisz to ustawienie domyślne tutaj, być może nasze defaultStackNavOptions, to ten obiekt, który ustawia styl nagłówka, 38 00:02:39,330 --> 00:02:45,670 a następnie możemy użyć defaultStackNavOptions tutaj w stosie nawigatora posiłków, a także tutaj w 39 00:02:45,840 --> 00:02:52,800 naszym ulubiony nawigator stosu, a ja również zapiszę go w stałej FavNavigator, oczywiście możesz nazwać 40 00:02:52,800 --> 00:02:55,330 tę stałą, jak chcesz. 41 00:02:55,410 --> 00:02:57,230 Teraz jest to FavNavigator, 42 00:02:57,270 --> 00:03:03,890 który w końcu stworzył komponent nawigatora stosu, którego chcę użyć w mojej tabScreenConfig, tam do posiłków 43 00:03:03,920 --> 00:03:09,420 używaliśmy już nawigatora stosu, dla ulubionych korzystałem z ulubionego ekranu i to teraz 44 00:03:09,420 --> 00:03:10,720 musi się 45 00:03:10,720 --> 00:03:16,620 zmienić, to teraz powinien być FavNavigator, więc tutaj używamy również stosu zamiast jednego ekranu. 46 00:03:16,680 --> 00:03:23,220 Dzięki temu, jeśli przejdziemy do ulubionych, mamy tutaj tytuł, przynajmniej mamy nagłówek, który 47 00:03:23,220 --> 00:03:27,000 już dowodzi, że używamy tutaj nawigatora stosów. 48 00:03:27,080 --> 00:03:31,870 Teraz oczywiście ekran nie jest tak przydatny, a nie coś, co chcę tu 49 00:03:31,920 --> 00:03:37,500 powiedzieć, więc chcę ustawić określone opcje nawigacji dla ulubionego ekranu i możemy go użyć tutaj, gdy 50 00:03:37,560 --> 00:03:43,290 tworzymy nawigator stosu ulubionych o dłuższej formie gdzie ustawiliśmy tutaj ekran i opcje nawigacji dla tego 51 00:03:43,290 --> 00:03:47,340 ekranu lub robimy to bezpośrednio w naszym komponencie, to właśnie zrobiłem 52 00:03:47,370 --> 00:03:48,570 do tej 53 00:03:48,600 --> 00:03:50,330 pory, to też tutaj zrobię. 54 00:03:50,340 --> 00:03:55,560 Tam możemy skonfigurować ekran ulubionych. navigationOpcje takie jak ten, użyj obiektu 55 00:03:55,740 --> 00:03:57,610 tutaj, nie potrzebujemy 56 00:03:57,630 --> 00:04:03,900 funkcji, ponieważ nie będę tutaj uzyskiwał nazwy dynamicznie, a tutaj w opcjach nawigacji po 57 00:04:03,900 --> 00:04:11,700 prostu ustawię tytuł nagłówka na ulubione i oczywiście możesz wybrać dowolny tekst, który chcesz tutaj, a jeśli 58 00:04:11,700 --> 00:04:17,880 go teraz zapiszemy, teraz widzimy tutaj nasz niestandardowy tytuł, który jest nieco lepszy. 59 00:04:17,880 --> 00:04:24,090 Jak już powiedziałem, tak naprawdę nie mamy narzędzi do przechowywania posiłków jako ulubionych, to 60 00:04:24,090 --> 00:04:26,410 coś, co zrobimy za chwilę. 61 00:04:26,430 --> 00:04:29,160 Więc na razie chcę tylko 62 00:04:29,160 --> 00:04:36,000 wyświetlić tutaj niektóre obojętne posiłki, powiedzmy posiłki o ID M1 i M2, po prostu dwa obojętne 63 00:04:36,000 --> 00:04:41,670 posiłki i w tym celu możemy przejść do ulubionego ekranu i zamiast wyświetlać ten 64 00:04:41,670 --> 00:04:45,000 widok tutaj, w koniec Chcę wyświetlać to samo, 65 00:04:45,000 --> 00:04:51,480 co na ekranie kategorii posiłków, tak, chcę wyrenderować FlatList, który następnie renderuje tutaj moje posiłki. 66 00:04:51,480 --> 00:04:53,620 Jedyną różnicą jest to, które 67 00:04:53,640 --> 00:04:58,300 posiłki renderuję, logika nie będzie taka sama, ponieważ jest inna dla mojego ulubionego ekranu. 68 00:04:58,320 --> 00:05:03,480 Będzie to jednak takie samo i ponieważ użyję ponownie logiki tworzenia listy, 69 00:05:03,480 --> 00:05:09,570 a jedyne, co się różni, to dane, które renderuję, sensowne byłoby przeniesienie tej listy na 70 00:05:09,750 --> 00:05:15,140 osobny komponent, abyśmy mogli ponownie użyć komponentu w kategoria posiłków i ekran ulubionych. 71 00:05:15,180 --> 00:05:20,970 Więc w folderze składników dodam MealList. plik js i tam chcę mieć 72 00:05:21,000 --> 00:05:30,210 komponent React, więc zaimportuj React z React, a także będziemy musieli zaimportować FlatList z React-Native, a także oczywiście zaimportować arkusz stylów 73 00:05:30,210 --> 00:05:34,470 z React-Native, a potem tutaj , możemy utworzyć nasz składnik 74 00:05:34,470 --> 00:05:42,500 listy posiłków, w którym otrzymamy rekwizyty, i następnie eksportujemy go jako domyślny, potrzebujemy również trochę stylów, abyśmy mogli 75 00:05:42,500 --> 00:05:43,180 już 76 00:05:43,190 --> 00:05:49,940 dodać tworzenie arkusza stylów w ten sposób, a teraz chcę przejść do logiki mojej listy z 77 00:05:49,940 --> 00:05:56,690 kategorii ekran posiłku do tego nowego składnika. Tak więc wytnę cały ten kod 78 00:05:56,930 --> 00:06:04,640 jsx, który zwracam tutaj na ekranie kategorii posiłków, przesuwam go tutaj i zwracam w składniku 79 00:06:04,910 --> 00:06:06,380 listy posiłków. 80 00:06:06,380 --> 00:06:08,720 Więc teraz zwrócę ten 81 00:06:08,720 --> 00:06:16,000 widok, dlatego też oczywiście musimy go zaimportować. Oznacza to również, że musimy zmienić wygląd, więc tutaj ten 82 00:06:16,000 --> 00:06:21,340 styl ekranu można również wyciąć z kategorii posiłków, a zatem tutaj nie potrzebujemy już arkusza 83 00:06:21,340 --> 00:06:22,370 stylów, możemy 84 00:06:22,480 --> 00:06:24,700 również pozbyć się importu arkusza stylów, 85 00:06:24,700 --> 00:06:29,650 możemy faktycznie pozbyć się wszystkich importów React Native, ponieważ nie mamy już żadnego komponentu 86 00:06:29,680 --> 00:06:37,000 React Native i zamiast tego przenieśmy go na listę posiłków. Tak więc w arkuszu stylów mogę dodać ten ekran, który 87 00:06:37,000 --> 00:06:42,540 właśnie usunąłem, i dlatego bardziej pasująca nazwa to prawdopodobnie listy, więc zmienię nazwę tego, technicznie 88 00:06:42,610 --> 00:06:47,590 nie musisz go zmieniać, ale ma to sens, ponieważ nie jest to teraz 89 00:06:47,590 --> 00:06:52,570 element ekranu, to tylko renderowanie listy, która następnie jest jedyną częścią naszego ekranu, 90 00:06:52,570 --> 00:06:56,590 ale to inna historia. Więc po prostu nadam nazwę tej liście, mam tam swoją FlatList. 91 00:06:57,960 --> 00:07:02,240 Teraz, oczywiście, wyświetlane posiłki, które chcę wyrenderować, które już nie będą działać, zamiast 92 00:07:02,240 --> 00:07:09,170 tego po prostu oczekuję, że uzyskam tutaj jakieś dane z moich rekwizytów, może nazwij to danymi z listy, możesz oczywiście wybrać 93 00:07:09,170 --> 00:07:15,380 dowolną nazwę i renderować element posiłku, którego również brakuje. W tym celu w kategorii posiłków możemy 94 00:07:16,190 --> 00:07:17,030 przyciąć 95 00:07:17,040 --> 00:07:20,570 ten stały element renderowania posiłku tutaj, wyciąć go z 96 00:07:20,570 --> 00:07:25,250 ekranu kategorii posiłków i przenieść go również na naszą listę posiłków. 97 00:07:25,250 --> 00:07:27,240 Dlatego w komponencie 98 00:07:27,290 --> 00:07:33,890 listy posiłków dodam tę stałą, która zawiera funkcję renderowania pozycji posiłku, która ma wszystko, czego 99 00:07:34,160 --> 00:07:37,650 potrzebuje do pracy, z wyjątkiem jednej rzeczy: brak 100 00:07:37,760 --> 00:07:49,160 importu pozycji posiłku, więc musimy zaimportować pozycję posiłku. / MealItem, czyli ze składnika pozycji posiłku. W składniku listy posiłków nie będzie jeszcze jednej rzeczy, 101 00:07:49,160 --> 00:07:51,470 a mianowicie rekwizyt nawigacyjny, ponieważ, 102 00:07:51,470 --> 00:07:56,300 jak wspomniałem, rekwizyt nawigacyjny jest dostępny tylko w komponentach, które są 103 00:07:56,300 --> 00:08:02,390 ładowane za pomocą nawigatora przez React navigation i tylko w tym komponent, a nie 104 00:08:02,420 --> 00:08:04,100 w komponentach zagnieżdżonych. 105 00:08:04,100 --> 00:08:09,620 Rzecz w tym, że kategoria posiłków to składnik, który ładujemy za pomocą nawigatora, a jeśli 106 00:08:09,620 --> 00:08:12,630 użyjemy tam listy posiłków, co zrobimy za sekundę, 107 00:08:12,690 --> 00:08:18,920 lista posiłków nie będzie miała dostępu do nawigacji rekwizytów, tylko bezpośrednio załadowany komponent ma dostęp, ale będzie 108 00:08:19,400 --> 00:08:21,790 to problem, który można łatwo rozwiązać. 109 00:08:21,890 --> 00:08:30,530 Przede wszystkim jednak zaimportujmy tutaj listę posiłków z komponentu listy posiłków i wróćmy tutaj tutaj w kategorii składników posiłków, 110 00:08:30,650 --> 00:08:38,690 a teraz lista posiłków oczywiście potrzebuje tej propozycji danych listy, z którą pracujemy, więc przekażmy dane listy 111 00:08:38,690 --> 00:08:39,920 i powinno to 112 00:08:39,920 --> 00:08:46,900 po prostu wskazywać tablicę, którą chcemy renderować, która w tym przypadku wyświetla posiłki, a teraz, 113 00:08:46,900 --> 00:08:48,130 jak wspomniałem, 114 00:08:48,140 --> 00:08:53,110 będziemy mieć problem z rekwizytem nawigacyjnym, ale możemy go po prostu 115 00:08:53,260 --> 00:09:00,760 przesłać dalej, możemy użyć nawigacji, dodać taki rekwizyt tutaj do listy posiłków i nawigacja do przodu 116 00:09:00,790 --> 00:09:01,960 rekwizytów, 117 00:09:01,960 --> 00:09:06,170 czyli jak łatwo możemy to przekazać do listy posiłków. 118 00:09:06,200 --> 00:09:11,660 Więc teraz na liście posiłków, w tym komponencie, ponownie będziemy mieć rekwizyt nawigacyjny, 119 00:09:11,660 --> 00:09:16,940 ponieważ go przekazujemy, dodajemy własny rekwizyt nawigacyjny i wskazujemy dane, które otrzymujemy 120 00:09:16,940 --> 00:09:18,810 na rekwizyt nawigacyjny dostarczony 121 00:09:18,890 --> 00:09:20,480 przez React nawigacja, 122 00:09:20,540 --> 00:09:26,850 w ten sposób mamy do niej dostęp ponownie, a dzięki temu powinniśmy mieć konfigurację, która 123 00:09:27,240 --> 00:09:33,570 działa, więc powinien to być ekran kategorii posiłków. Zapiszmy go i zignorujmy na chwilę ulubiony 124 00:09:33,570 --> 00:09:40,110 ekran i zobaczmy, że nasz nawigator stosów nadal działa i wydaje się, że jeśli to 125 00:09:40,160 --> 00:09:48,820 przetestuję, to na pewno działa tutaj tak, jak było wcześniej. Teraz upewnijmy się, że używamy tego również na 126 00:09:48,820 --> 00:09:50,620 ulubionym ekranie. 127 00:09:50,620 --> 00:09:55,320 Więc tutaj, na ulubionym ekranie, nie musimy importować niczego z React Native, 128 00:09:55,330 --> 00:10:01,270 zamiast tego musimy tylko zaimportować właśnie utworzony składnik listy posiłków z składników, a następnie listę 129 00:10:01,600 --> 00:10:06,670 posiłków i po prostu zwrócić listę posiłków, a teraz różnicę do kategorii ekran 130 00:10:06,730 --> 00:10:11,500 posiłku, w którym również zwracamy listę posiłków, to oczywiście dane, które chcemy 131 00:10:11,510 --> 00:10:12,150 renderować, 132 00:10:12,190 --> 00:10:14,410 logika uzyskiwania tych danych, to 133 00:10:14,410 --> 00:10:15,880 różnica, a inną różnicą 134 00:10:15,880 --> 00:10:20,250 między składnikami jest oczywiście nasza konfiguracja opcji nawigacji i tytuł nagłówka, 135 00:10:20,260 --> 00:10:21,450 który ustalamy. 136 00:10:22,030 --> 00:10:26,680 Możemy pozbyć się arkusza stylów tutaj, nie potrzebujemy go już tutaj na 137 00:10:26,680 --> 00:10:27,820 ulubionym ekranie, 138 00:10:27,970 --> 00:10:30,010 a teraz dane, które chcę 139 00:10:30,100 --> 00:10:31,960 renderować, zależą od moich 140 00:10:34,440 --> 00:10:42,060 posiłków, więc zaimportuję posiłki, teraz z danych fikcyjnych . plik js i jak wspomniałem tutaj, ponieważ nie 141 00:10:42,080 --> 00:10:47,120 mamy prawdziwego sposobu ustawiania ulubionych, użyję tylko fikcyjnych ulubionych, które wymyślę. 142 00:10:47,160 --> 00:10:55,710 Więc tutaj, moje ulubione posiłki, to może być mój zestaw posiłków i tam chcę filtrować dla dwóch konkretnych posiłków, więc 143 00:10:55,860 --> 00:10:57,500 przyjrzę się każdemu 144 00:10:57,540 --> 00:11:05,510 pojedynczemu posiłkowi, ale powrócę tylko, jeśli posiłek. id jest równy M1 lub jeśli posiłek. id jest równy M2 i 145 00:11:05,520 --> 00:11:09,480 to oczywiście tylko sztuczna logika, więc mamy coś tutaj, 146 00:11:09,600 --> 00:11:15,330 zastąpimy to później, gdy naprawdę będziemy wiedzieć, jak zarządzać naszym stanem i jak 147 00:11:15,330 --> 00:11:17,580 zarządzać aktualnie ustawionymi ulubionymi. 148 00:11:17,610 --> 00:11:23,730 Teraz do listy posiłków, do naszego komponentu tutaj, możemy ponownie 149 00:11:23,820 --> 00:11:36,840 przesłać propozycję danych listy, której tam potrzebujemy, abyśmy mogli dalej przekazywać dane listy i ustawiać to równe ulubionym posiłkom, tak po prostu. 150 00:11:36,850 --> 00:11:38,980 Więc teraz powinniśmy mieć również 151 00:11:39,010 --> 00:11:40,990 kilka ulubionych i tak, 152 00:11:40,990 --> 00:11:47,440 mamy dwie, ale jeśli kliknę na to, zostaniemy niezdefiniowani, nie jest to obiekt, w którym próbujemy 153 00:11:48,670 --> 00:11:54,520 nazywać rekwizyty nawigacja nawigacja i tak, problem oczywiście jest taki, że w lista posiłków, jak 154 00:11:54,550 --> 00:11:59,560 wspomniałem, używamy rekwizytu nawigacyjnego i jest dostępna tylko w komponencie, który jest 155 00:11:59,590 --> 00:12:05,440 bezpośrednio ładowany przez nawigator, więc w tym przypadku jest to ulubiony ekran i w kategorii 156 00:12:05,440 --> 00:12:11,080 posiłków, rozwiązujemy to, przekazując nawigację rekwizyt, oczywiście musimy zrobić to samo tutaj dla naszego 157 00:12:11,080 --> 00:12:17,170 ulubionego ekranu, więc musimy podać rekwizyt nawigacyjny tutaj na liście posiłków i nawigację rekwizytów do 158 00:12:17,170 --> 00:12:22,800 przodu, aby rekwizyt nawigacyjny z metodą nawigacji był dostępny w składniku listy posiłków także. 159 00:12:22,870 --> 00:12:29,940 Teraz, jeśli przejdziemy do ulubionych, rzeczywiście jesteśmy w stanie przejść do ekranu szczegółów. 160 00:12:30,130 --> 00:12:37,690 Więc to działa, to całkiem przyzwoite, całkiem fajne. Jak widać, te dwa nawigatory stosu również działają niezależnie od siebie, możemy 161 00:12:37,720 --> 00:12:38,700 być na 162 00:12:38,700 --> 00:12:44,200 ekranie szczegółów w obu stosach osobno, tutaj jestem na ekranie szczegółów łososia w zakładce posiłków i mogę 163 00:12:44,470 --> 00:12:50,410 iść na Hawaje toastowe szczegółowy ekran w zakładce ulubionych. Możemy wrócić tutaj w zakładce posiłków, a 164 00:12:50,530 --> 00:12:54,840 ja wciąż jestem na stronie szczegółów hawajskich tostów tutaj, w stosie ulubionych. 165 00:12:54,940 --> 00:12:57,670 Tak więc te dwa stosy działają osobno od siebie, 166 00:12:57,700 --> 00:13:00,350 całkowicie niezależnie i tak właśnie powinno być i 167 00:13:00,610 --> 00:13:06,130 w ten sposób możemy ponownie użyć pewnej logiki i w jaki sposób możemy połączyć różne stosy w jeden 168 00:13:06,130 --> 00:13:07,760 i ten sam nawigator 169 00:13:07,810 --> 00:13:11,900 kart, a mimo to nadal brakuje logiki , logika, by naprawdę dodawać ulubione, 170 00:13:11,950 --> 00:13:17,620 jest to ogromny krok naprzód i mam nadzieję, że pokazuje moc nawigacji React i jak skonfigurować ten wspólny 171 00:13:17,620 --> 00:13:24,490 wzór nawigacji, w którym masz tabulatory, a następnie różne zagnieżdżone stosy. Brakuje jednego wzorca nawigacji, który chcę wam pokazać, 172 00:13:24,490 --> 00:13:25,920 a to jest 173 00:13:26,080 --> 00:13:27,210 boczna szuflada.