Po dodaniu kart brakuje treści na ulubionym ekranie.
Teraz tak naprawdę nie mamy jeszcze funkcji dodawania ulubionych, jeśli klikniemy tę ikonę gwiazdki, to nic nie robi,
a
przy okazji, wiem, że tutaj również brakuje
treści, dodamy to później.
Więc kliknięcie ikony gwiazdki nic jeszcze nie robi, a my będziemy
mogli zrobić to
trochę później, nadal chcę zapełnić ten ulubiony ekran trochę bardziej przynajmniej niektórymi smoczymi posiłkami, które
tam ładujemy powiedzmy,
a przynajmniej z funkcjonalnością, aby przejść tam również do MealDetailScreen, ponieważ ostatecznie chodzi o
to, że mamy tutaj listę posiłków, tak jak mamy
ją tutaj po wybraniu kategorii i którą możemy dotknąć posiłek, aby przejść do strony szczegółów,
tak jak możemy
to zrobić w nawigatorze posiłków, więc w nawigatorze stosów posiłków powinienem powiedzieć, a zatem
w końcu to, czego potrzebujemy dla ulubionych, dla naszej zakładki ulubionych nie jest pojedynczy ekran ale inny stos, stos dla naszych
ulubionych
funkcji w tej aplikacji, to jest to, czego potrzebujemy
tutaj, to przy okazji da nam również nagłówek, którego obecnie brakuje.
Oczywiście, nie jest to
zbyt trudne do wdrożenia, możemy po prostu utworzyć inny nawigator stosów powyżej naszej tabScreenConfig, a to ustawi
nawigator stosu dla naszego ulubionego stosu.
Więc obiekt, który mijamy tutaj, musi zdefiniować wszystkie ekrany, które chcemy mieć na tym
stosie, i to byłby sam ekran ulubionych z listą naszych ulubionych
posiłków, a tam chcę wskazać ekran ulubionych, a następnie chcę mieć szczegóły posiłku, a ja
wskażę na MealDetailScreen, a my już używamy MealDetailScreen tutaj w naszym nawigatorze posiłków, w naszym drugim
nawigatorze stosów, ale to
w porządku,
możesz używać jednego i tego samego ekranu w różnych nawigatorach
stosów, nie ma nic złego w że.
Możemy więc użyć MealDetailScreen również tutaj w nawigatorze stosu ulubionych, a teraz chcę się upewnić, że
skopiuję tutaj również moje opcje, moje domyślne opcje nawigacji, ten drugi argument
w rzeczywistości do tworzenia nawigatora stosu, do nawigatora posiłków do moich ulubionych nawigator
stosu.
Więc tutaj, jako drugi argument do stworzenia nawigatora stosów, kopiuję do tego
obiektu, w którym konfiguruję domyślne opcje nawigacji, tak że dla tego stosu mam te
same wartości domyślne, mam ten sam styl nagłówka i dlatego oczywiście możemy również wytnij to
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,
a następnie możemy użyć defaultStackNavOptions tutaj w stosie nawigatora posiłków, a także tutaj w
naszym ulubiony nawigator stosu, a ja również zapiszę go w stałej FavNavigator, oczywiście możesz nazwać
tę stałą, jak chcesz.
Teraz jest to FavNavigator,
który w końcu stworzył komponent nawigatora stosu, którego chcę użyć w mojej tabScreenConfig, tam do posiłków
używaliśmy już nawigatora stosu, dla ulubionych korzystałem z ulubionego ekranu i to teraz
musi się
zmienić, to teraz powinien być FavNavigator, więc tutaj używamy również stosu zamiast jednego ekranu.
Dzięki temu, jeśli przejdziemy do ulubionych, mamy tutaj tytuł, przynajmniej mamy nagłówek, który
już dowodzi, że używamy tutaj nawigatora stosów.
Teraz oczywiście ekran nie jest tak przydatny, a nie coś, co chcę tu
powiedzieć, więc chcę ustawić określone opcje nawigacji dla ulubionego ekranu i możemy go użyć tutaj, gdy
tworzymy nawigator stosu ulubionych o dłuższej formie gdzie ustawiliśmy tutaj ekran i opcje nawigacji dla tego
ekranu lub robimy to bezpośrednio w naszym komponencie, to właśnie zrobiłem
do tej
pory, to też tutaj zrobię.
Tam możemy skonfigurować ekran ulubionych. navigationOpcje takie jak ten, użyj obiektu
tutaj, nie potrzebujemy
funkcji, ponieważ nie będę tutaj uzyskiwał nazwy dynamicznie, a tutaj w opcjach nawigacji po
prostu ustawię tytuł nagłówka na ulubione i oczywiście możesz wybrać dowolny tekst, który chcesz tutaj, a jeśli
go teraz zapiszemy, teraz widzimy tutaj nasz niestandardowy tytuł, który jest nieco lepszy.
Jak już powiedziałem, tak naprawdę nie mamy narzędzi do przechowywania posiłków jako ulubionych, to
coś, co zrobimy za chwilę.
Więc na razie chcę tylko
wyświetlić tutaj niektóre obojętne posiłki, powiedzmy posiłki o ID M1 i M2, po prostu dwa obojętne
posiłki i w tym celu możemy przejść do ulubionego ekranu i zamiast wyświetlać ten
widok tutaj, w koniec Chcę wyświetlać to samo,
co na ekranie kategorii posiłków, tak, chcę wyrenderować FlatList, który następnie renderuje tutaj moje posiłki.
Jedyną różnicą jest to, które
posiłki renderuję, logika nie będzie taka sama, ponieważ jest inna dla mojego ulubionego ekranu.
Będzie to jednak takie samo i ponieważ użyję ponownie logiki tworzenia listy,
a jedyne, co się różni, to dane, które renderuję, sensowne byłoby przeniesienie tej listy na
osobny komponent, abyśmy mogli ponownie użyć komponentu w kategoria posiłków i ekran ulubionych.
Więc w folderze składników dodam MealList. plik js i tam chcę mieć
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
z React-Native, a potem tutaj , możemy utworzyć nasz składnik
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
już
dodać tworzenie arkusza stylów w ten sposób, a teraz chcę przejść do logiki mojej listy z
kategorii ekran posiłku do tego nowego składnika. Tak więc wytnę cały ten kod
jsx, który zwracam tutaj na ekranie kategorii posiłków, przesuwam go tutaj i zwracam w składniku
listy posiłków.
Więc teraz zwrócę ten
widok, dlatego też oczywiście musimy go zaimportować. Oznacza to również, że musimy zmienić wygląd, więc tutaj ten
styl ekranu można również wyciąć z kategorii posiłków, a zatem tutaj nie potrzebujemy już arkusza
stylów, możemy
również pozbyć się importu arkusza stylów,
możemy faktycznie pozbyć się wszystkich importów React Native, ponieważ nie mamy już żadnego komponentu
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
właśnie usunąłem, i dlatego bardziej pasująca nazwa to prawdopodobnie listy, więc zmienię nazwę tego, technicznie
nie musisz go zmieniać, ale ma to sens, ponieważ nie jest to teraz
element ekranu, to tylko renderowanie listy, która następnie jest jedyną częścią naszego ekranu,
ale to inna historia. Więc po prostu nadam nazwę tej liście, mam tam swoją FlatList.
Teraz, oczywiście, wyświetlane posiłki, które chcę wyrenderować, które już nie będą działać, zamiast
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ć
dowolną nazwę i renderować element posiłku, którego również brakuje. W tym celu w kategorii posiłków możemy
przyciąć
ten stały element renderowania posiłku tutaj, wyciąć go z
ekranu kategorii posiłków i przenieść go również na naszą listę posiłków.
Dlatego w komponencie
listy posiłków dodam tę stałą, która zawiera funkcję renderowania pozycji posiłku, która ma wszystko, czego
potrzebuje do pracy, z wyjątkiem jednej rzeczy: brak
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,
a mianowicie rekwizyt nawigacyjny, ponieważ,
jak wspomniałem, rekwizyt nawigacyjny jest dostępny tylko w komponentach, które są
ładowane za pomocą nawigatora przez React navigation i tylko w tym komponent, a nie
w komponentach zagnieżdżonych.
Rzecz w tym, że kategoria posiłków to składnik, który ładujemy za pomocą nawigatora, a jeśli
użyjemy tam listy posiłków, co zrobimy za sekundę,
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
to problem, który można łatwo rozwiązać.
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,
a teraz lista posiłków oczywiście potrzebuje tej propozycji danych listy, z którą pracujemy, więc przekażmy dane listy
i powinno to
po prostu wskazywać tablicę, którą chcemy renderować, która w tym przypadku wyświetla posiłki, a teraz,
jak wspomniałem,
będziemy mieć problem z rekwizytem nawigacyjnym, ale możemy go po prostu
przesłać dalej, możemy użyć nawigacji, dodać taki rekwizyt tutaj do listy posiłków i nawigacja do przodu
rekwizytów,
czyli jak łatwo możemy to przekazać do listy posiłków.
Więc teraz na liście posiłków, w tym komponencie, ponownie będziemy mieć rekwizyt nawigacyjny,
ponieważ go przekazujemy, dodajemy własny rekwizyt nawigacyjny i wskazujemy dane, które otrzymujemy
na rekwizyt nawigacyjny dostarczony
przez React nawigacja,
w ten sposób mamy do niej dostęp ponownie, a dzięki temu powinniśmy mieć konfigurację, która
działa, więc powinien to być ekran kategorii posiłków. Zapiszmy go i zignorujmy na chwilę ulubiony
ekran i zobaczmy, że nasz nawigator stosów nadal działa i wydaje się, że jeśli to
przetestuję, to na pewno działa tutaj tak, jak było wcześniej. Teraz upewnijmy się, że używamy tego również na
ulubionym ekranie.
Więc tutaj, na ulubionym ekranie, nie musimy importować niczego z React Native,
zamiast tego musimy tylko zaimportować właśnie utworzony składnik listy posiłków z składników, a następnie listę
posiłków i po prostu zwrócić listę posiłków, a teraz różnicę do kategorii ekran
posiłku, w którym również zwracamy listę posiłków, to oczywiście dane, które chcemy
renderować,
logika uzyskiwania tych danych, to
różnica, a inną różnicą
między składnikami jest oczywiście nasza konfiguracja opcji nawigacji i tytuł nagłówka,
który ustalamy.
Możemy pozbyć się arkusza stylów tutaj, nie potrzebujemy go już tutaj na
ulubionym ekranie,
a teraz dane, które chcę
renderować, zależą od moich
posiłków, więc zaimportuję posiłki, teraz z danych fikcyjnych . plik js i jak wspomniałem tutaj, ponieważ nie
mamy prawdziwego sposobu ustawiania ulubionych, użyję tylko fikcyjnych ulubionych, które wymyślę.
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
przyjrzę się każdemu
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
to oczywiście tylko sztuczna logika, więc mamy coś tutaj,
zastąpimy to później, gdy naprawdę będziemy wiedzieć, jak zarządzać naszym stanem i jak
zarządzać aktualnie ustawionymi ulubionymi.
Teraz do listy posiłków, do naszego komponentu tutaj, możemy ponownie
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.
Więc teraz powinniśmy mieć również
kilka ulubionych i tak,
mamy dwie, ale jeśli kliknę na to, zostaniemy niezdefiniowani, nie jest to obiekt, w którym próbujemy
nazywać rekwizyty nawigacja nawigacja i tak, problem oczywiście jest taki, że w lista posiłków, jak
wspomniałem, używamy rekwizytu nawigacyjnego i jest dostępna tylko w komponencie, który jest
bezpośrednio ładowany przez nawigator, więc w tym przypadku jest to ulubiony ekran i w kategorii
posiłków, rozwiązujemy to, przekazując nawigację rekwizyt, oczywiście musimy zrobić to samo tutaj dla naszego
ulubionego ekranu, więc musimy podać rekwizyt nawigacyjny tutaj na liście posiłków i nawigację rekwizytów do
przodu, aby rekwizyt nawigacyjny z metodą nawigacji był dostępny w składniku listy posiłków także.
Teraz, jeśli przejdziemy do ulubionych, rzeczywiście jesteśmy w stanie przejść do ekranu szczegółów.
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
być na
ekranie szczegółów w obu stosach osobno, tutaj jestem na ekranie szczegółów łososia w zakładce posiłków i mogę
iść na Hawaje toastowe szczegółowy ekran w zakładce ulubionych. Możemy wrócić tutaj w zakładce posiłków, a
ja wciąż jestem na stronie szczegółów hawajskich tostów tutaj, w stosie ulubionych.
Tak więc te dwa stosy działają osobno od siebie,
całkowicie niezależnie i tak właśnie powinno być i
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
i ten sam nawigator
kart, a mimo to nadal brakuje logiki , logika, by naprawdę dodawać ulubione,
jest to ogromny krok naprzód i mam nadzieję, że pokazuje moc nawigacji React i jak skonfigurować ten wspólny
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ć,
a to jest
boczna szuflada.