Na razie skupmy się na ekranie szczegółów
posiłku,
a więc tutaj, gdzie oglądamy szczegóły wybranego przepisu.
W tej chwili mamy po prostu zawartość manekina, ekranu szczegółów posiłku i oczywiście nie jest to
treść, którą naprawdę chcę tam mieć, zamiast
tego, co powinno tam być?
Cóż, jeśli przyjrzymy się naszemu modelowi posiłków, prawdopodobnie ma sens, aby mieć tam obraz, pamiętaj,
że tytuł jest już pokazany w naszym nagłówku, więc warto mieć obraz
tutaj na górze i poniżej, może po prostu powtórz czas trwania, przystępność cenową i złożoność, tak jak robimy to tutaj poniżej
naszego przepisu, a następnie również poniżej tego, wymień
wszystkie składniki i kroki, jakie należy wykonać, aby zrobić to danie. W końcu to właśnie chcę mieć na tej stronie
tutaj w MealDetailScreen i dlatego myślę, że sensowne jest przede wszystkim
dodanie widoku przewijania, ponieważ na pewno będziemy mieć tam dużo treści, które najprawdopodobniej
nie będą zmieści się na jednym ekranie i na pewno nie na wszystkich możliwych rozmiarach urządzeń.
Dodam tutaj widok przewijania i zawinę go tutaj wokół mojej zawartości.
Teraz będziemy mieć kilka różnych
sekcji tutaj, na przykład na samej górze, chcę mieć mój obraz, a do
tego zaimportuję również komponent obrazu z React Native tutaj, abyśmy mogli renderować
obraz tutaj, a nie obraz tła,
ale normalny obraz i chcę to dodać, powiedzmy tutaj u góry, coś takiego.
Teraz po obrazie chcę mieć widok z czasem trwania, przystępnością i złożonością, jak wspomniałem, więc w
zasadzie ten sam układ, który mamy w pozycji posiłku, to tutaj możesz powiedzieć, a zatem skopiuję widok z
tego miejsca a następnie możemy go dostosować w razie potrzeby tutaj w MealDetailScreen, więc
po prostu zastąpię ten widok widokiem widoku.
Oczywiście wymaga to zaimportowania tutaj domyślnego komponentu
tekstowego,
więc dodajmy to, zaimportujmy domyślny tekst z
domyślnego komponentu tekstowego. Więc to jest następny rząd,
a potem chcę mieć moje składniki i kroki, które musisz wykonać.
Możemy więc dodać tutaj tekst, w którym mówimy składniki, i tam, chcę również zastosować styl, taki jak styl tekstu, tytuł, coś takiego lub po prostu
tytuł, ponieważ chcę mieć tutaj
pogrubiony nagłówek, może zwiększyć rozmiar czcionki. Poniżej mam moją listę składników, więc
listę składników i oczywiście nie jest to ostateczna treść, zamiast tego wyrenderujemy listę
tutaj, a poniżej, powtórzę to tutaj, ponieważ wtedy chcę mieć tytuł, w którym powiem kroki, a następnie
listę kroków poniżej, a teraz pozbędę się tamtej starej zawartości i właśnie z tym
chcę pracować.
Teraz oczywiście brakuje wszystkich stylów, a także czasu trwania rekwizytów i tak dalej,
co niczego nie daje, zamiast tego musimy tutaj pracować z wybranym posiłkiem, wybranym czasem
trwania posiłku, wybraną złożonością posiłku, wybraną przystępnością cenową i dla obrazu na przykład chcę tutaj dodać źródło, ponieważ źródło jest obrazem sieciowym,
jest to obiekt o właściwości URI wskazujący na selectedMeal. imageUrl, aby załadować to, a także musimy
zastosować tam styl, aby ustawić szerokość i wysokość, więc
tutaj chcę wskazać style image, powiedzmy, i wszystkie te style brakuje,
jak powiedziałem, więc dodajmy to. Tutaj dla tego stylu chcę również powiedzieć style. szczegóły może dlatego, że wyświetlamy szczegóły
tego przepisu i przejdźmy do arkusza stylów, dlatego usuń ekran, którego już
nie
potrzebujemy, zamiast tego dodajmy obraz i szczegóły. Teraz, aby uzyskać szczegółowe informacje, musimy ustawić kierunek wygięcia na wiersz, ponieważ
powinny to być wszystkie szczegóły z rzędu.
Możemy dodać trochę dopełnienia we wszystkich kierunkach, może do 15, a także dodać uzasadnioną zawartość
przestrzeni wokół, aby ładnie rozprowadzić tutaj nasze detale, które powinny być dobre.
Oprócz tego na zdjęciu tutaj musimy również dodać styl, tam szerokość powinna wynosić 100%, powiedzmy, aby
wziąć pełną dostępną szerokość i na wysokość, pójdę z 200, chociaż oczywiście możesz
oblicz to
dynamicznie na przykład za pomocą interfejsu API wymiarów, aby zawsze brać
określoną część dostępnej wysokości lub po prostu bawić się tutaj z różnymi wartościami.
Pójdę z tym i zajrzę tutaj, a to nie
wygląda zbyt nędznie, to nie
jest tak źle.
Teraz możesz zdecydowanie spróbować tutaj dodatkowej pracy, dodatkowych zadań i na przykład pokolorować te szczegóły -
proste, niedrogie i czas trwania w zależności od tego, czy jest raczej krótki, czy w
zależności od różnych wartości, które masz za proste, złożoności i przystępności cenowej .
Nie zrobię tego tutaj, ale możesz oczywiście spojrzeć na dane dotyczące posiłku, aby zobaczyć, jakie mamy wartości, aby
uzyskać to, co jest krótkie, jaki jest średni czas trwania, a który jest długi, i zobaczyć, które wartości są wykorzystywane do
złożoności i itd., a następnie możesz dodać kilka elementów, jeśli chcesz zastosować inny styl do różnych
wartości, które wyświetlamy tutaj na ekranie szczegółów posiłku dla tych szczegółów, dzięki czemu możesz kolorować tekst w różny sposób, w
zależności od tego, czy jest długi, czy nie. Nie zrobię tego tutaj, ponieważ jest
to tylko dodatkowa praca, która tak naprawdę nie dodaje wiele do nawigacji, która jest
przedmiotem tego modułu.
Zamiast tego skupię się na składnikach i krokach. Pierwszym krokiem jest upewnienie się, że tytuł tutaj
jest odpowiednio stylizowany.
Dodajmy więc tytuł do arkusza stylów, a tam dodam rodzinę czcionek i ustawię, aby otwierała się
bez pogrubienia, ustawię rozmiar czcionki na 22 może i ustawię tekst wyrównując do środka, aby wyśrodkować tekst
na środku, a jeśli sprawdzamy to, wygląda to całkiem ładnie.
Teraz chcę również wyprowadzać moje składniki w moich krokach i dlatego ważne jest, aby zrozumieć, że
w danych fikcyjnych są to tablice, to są moje składniki
na przykład, to są
moje kroki i widzisz, że jest w nich tylko tekst tablice. Chcę po prostu wyprowadzić mój tekst tutaj
jako listę i nie użyję FlatList, ponieważ możesz to zrobić, możesz mieć przewijane pojemniki, że tak
powiem, ale po prostu wyrenderuję składniki i kroki na górze każdego inny.
Więc tutaj możemy zastosować dobre, stare podejście, które znamy z Vanilla React lub React dla
sieci, które pokazałem również wcześniej podczas kursu. Możemy użyć naszego wybranego posiłku i składników, które są
tablicą ciągów i zamapować to na tablicę składników, w
ten sposób możesz wyprowadzić listę danych w React i React Native i często używasz FlatList,
ale tutaj nie musimy tego robić, ponieważ nie jest to nieskończona ilość,
więc nie potrzebujemy tych optymalizacji i mamy zawijany widok przewijania na całym ekranie, więc będziemy mogli
przewijać, jeśli wyświetlamy więcej niż pasują na ekranie, więc jest absolutnie w porządku,
używając tego podejścia, dlatego tutaj
będę mieć mój pojedynczy składnik w tej funkcji mapy, a mapa jest metodą wbudowaną w
JavaScript, jak wiesz, a
tutaj musimy teraz zwrócić element jsx, a to,
co chcę zwrócić, to komponent tekstowy, w którym po prostu wyprowadzam składnik, ponieważ składniki są
tablicą ciągów,
więc składnik jest tylko łańcuchem,
a następnie tutaj musimy również podać klucz, jest to wymóg React i
możemy użyć składnika jako klucza, ponieważ będziemy zawsze miej każdy składnik tylko raz.
Gwarantuje to, że jest wyjątkowy,
tak powstają nasze posiłki, a dzięki
temu, jeśli uratujemy to i przejrzymy przepis, zobaczymy nasze składniki. Teraz, jeśli chodzi o stylizację, z pewnością możemy
coś tam zrobić i
zrobię to za sekundę, ale zanim to zrobię, pozwólcie, że powtórzę to
dla kroków tutaj, zamień ten tekst na selectMeal. kroki, a następnie wypisuj każdy krok tutaj, który jest również
tylko ciągiem, i który jest również unikalny w tekście, a po dodaniu tego, powinniśmy również zobaczyć kroki naszego posiłku, w rzeczy samej.
Teraz znowu styl można nieco ulepszyć i zrobimy to samo i myślę,
że sensowne jest utworzenie osobnego komponentu lub funkcji renderowania w tym celu, a ja utworzę osobny komponent, będziemy przechowywać
go w tym samym pliku chociaż ponieważ używamy go tylko w tym pliku, ale możesz również
utworzyć
nowy plik, całkowicie według Ciebie. Tam będę miał mój
element listy, który odbiera rekwizyty, do których wracam, a teraz chcę użyć widoku, który
importuję jako opakowanie, aby móc stylizować ten pojemnik, a tam
mieć tekst, w którym wyprowadzam rekwizyty potomne a teraz ten widok uzyska styl
ze stylów. ListItem może po to, abyśmy
mogli ładnie to stylizować i tutaj, oczywiście, nie chcę używać tekstu, ale tekst
domyślny, również
tutaj, abyśmy mogli skorzystać z własnego tekstu niestandardowego.
Teraz, jeśli chodzi o styl elementu listy, przejdźmy do arkusza stylów i dodajmy element listy, a każdy
element listy powinien mieć pewien margines, pionowy margines, powiedzmy 10, a poziomy margines, powiedzmy 20,
więc więcej odstępów od lewej i prawej i może dodamy tutaj kolor obramowania o jasnoszarym kolorze z #ccc i
szerokością obramowania 1, zobaczymy jak to wygląda,
a następnie dodamy trochę dopełnienia, 10 we wszystkich kierunkach, a my Zobaczę jak
to wygląda.
Teraz musimy tylko upewnić się, że używamy naszego elementu pozycji na liście i używamy go, zwracając go zamiast tekstu
tutaj podczas generowania składników, nadal przekazujemy składnik między otwierającymi i zamykającymi tagami własnego
niestandardowego składnika, ponieważ tam jesteśmy za pomocą rekwizytów dzieci, które korzystają z treści, które przekazujemy
między otwieraniem a zamykaniem tagów i robimy
to samo dla naszych kroków. Spójrzmy
na to,
tak nie wygląda źle. Dostajemy nasze kroki tutaj, mamy nasze składniki, oczywiście możesz dopracować tę stylizację,
dostosować ją do swoich wymagań, tak, jak chcesz, aby wyglądała, ale tak naprawdę jestem z tego bardzo zadowolony, a dzięki temu
mamy podstawowy szczegół ekran i oczywiście ten ekran szczegółów działa również w przypadku naszych ulubionych, ponieważ
używamy tam jednego i tego samego ekranu.
Wygląda to całkiem ładnie, brakuje ekranu filtru.