1 00:00:02,420 --> 00:00:06,140 Na razie skupmy się na ekranie szczegółów 2 00:00:06,170 --> 00:00:06,770 posiłku, 3 00:00:09,660 --> 00:00:13,950 a więc tutaj, gdzie oglądamy szczegóły wybranego przepisu. 4 00:00:14,070 --> 00:00:19,590 W tej chwili mamy po prostu zawartość manekina, ekranu szczegółów posiłku i oczywiście nie jest to 5 00:00:19,590 --> 00:00:21,810 treść, którą naprawdę chcę tam mieć, zamiast 6 00:00:22,020 --> 00:00:24,190 tego, co powinno tam być? 7 00:00:24,210 --> 00:00:30,280 Cóż, jeśli przyjrzymy się naszemu modelowi posiłków, prawdopodobnie ma sens, aby mieć tam obraz, pamiętaj, 8 00:00:30,330 --> 00:00:35,340 że tytuł jest już pokazany w naszym nagłówku, więc warto mieć obraz 9 00:00:35,340 --> 00:00:43,710 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 10 00:00:43,710 --> 00:00:47,140 naszego przepisu, a następnie również poniżej tego, wymień 11 00:00:47,370 --> 00:00:56,730 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 12 00:00:56,730 --> 00:01:02,170 tutaj w MealDetailScreen i dlatego myślę, że sensowne jest przede wszystkim 13 00:01:02,340 --> 00:01:08,220 dodanie widoku przewijania, ponieważ na pewno będziemy mieć tam dużo treści, które najprawdopodobniej 14 00:01:08,220 --> 00:01:15,340 nie będą zmieści się na jednym ekranie i na pewno nie na wszystkich możliwych rozmiarach urządzeń. 15 00:01:15,390 --> 00:01:22,320 Dodam tutaj widok przewijania i zawinę go tutaj wokół mojej zawartości. 16 00:01:22,330 --> 00:01:24,920 Teraz będziemy mieć kilka różnych 17 00:01:25,030 --> 00:01:30,750 sekcji tutaj, na przykład na samej górze, chcę mieć mój obraz, a do 18 00:01:30,750 --> 00:01:36,300 tego zaimportuję również komponent obrazu z React Native tutaj, abyśmy mogli renderować 19 00:01:36,300 --> 00:01:39,030 obraz tutaj, a nie obraz tła, 20 00:01:39,270 --> 00:01:45,260 ale normalny obraz i chcę to dodać, powiedzmy tutaj u góry, coś takiego. 21 00:01:45,260 --> 00:01:51,390 Teraz po obrazie chcę mieć widok z czasem trwania, przystępnością i złożonością, jak wspomniałem, więc w 22 00:01:51,400 --> 00:01:57,930 zasadzie ten sam układ, który mamy w pozycji posiłku, to tutaj możesz powiedzieć, a zatem skopiuję widok z 23 00:01:57,930 --> 00:02:03,330 tego miejsca a następnie możemy go dostosować w razie potrzeby tutaj w MealDetailScreen, więc 24 00:02:03,360 --> 00:02:06,220 po prostu zastąpię ten widok widokiem widoku. 25 00:02:06,360 --> 00:02:10,510 Oczywiście wymaga to zaimportowania tutaj domyślnego komponentu 26 00:02:10,710 --> 00:02:11,700 tekstowego, 27 00:02:11,720 --> 00:02:16,370 więc dodajmy to, zaimportujmy domyślny tekst z 28 00:02:16,610 --> 00:02:21,450 domyślnego komponentu tekstowego. Więc to jest następny rząd, 29 00:02:21,500 --> 00:02:26,580 a potem chcę mieć moje składniki i kroki, które musisz wykonać. 30 00:02:26,890 --> 00:02:39,790 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 31 00:02:39,820 --> 00:02:42,910 tytuł, ponieważ chcę mieć tutaj 32 00:02:45,630 --> 00:02:52,320 pogrubiony nagłówek, może zwiększyć rozmiar czcionki. Poniżej mam moją listę składników, więc 33 00:02:52,320 --> 00:02:58,770 listę składników i oczywiście nie jest to ostateczna treść, zamiast tego wyrenderujemy listę 34 00:02:58,770 --> 00:03:07,260 tutaj, a poniżej, powtórzę to tutaj, ponieważ wtedy chcę mieć tytuł, w którym powiem kroki, a następnie 35 00:03:07,980 --> 00:03:14,760 listę kroków poniżej, a teraz pozbędę się tamtej starej zawartości i właśnie z tym 36 00:03:14,760 --> 00:03:15,940 chcę pracować. 37 00:03:15,960 --> 00:03:20,790 Teraz oczywiście brakuje wszystkich stylów, a także czasu trwania rekwizytów i tak dalej, 38 00:03:20,790 --> 00:03:26,080 co niczego nie daje, zamiast tego musimy tutaj pracować z wybranym posiłkiem, wybranym czasem 39 00:03:26,130 --> 00:03:34,560 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, 40 00:03:34,590 --> 00:03:42,210 jest to obiekt o właściwości URI wskazujący na selectedMeal. imageUrl, aby załadować to, a także musimy 41 00:03:42,240 --> 00:03:47,210 zastosować tam styl, aby ustawić szerokość i wysokość, więc 42 00:03:47,310 --> 00:03:53,190 tutaj chcę wskazać style image, powiedzmy, i wszystkie te style brakuje, 43 00:03:53,190 --> 00:04:02,470 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 44 00:04:02,470 --> 00:04:08,680 tego przepisu i przejdźmy do arkusza stylów, dlatego usuń ekran, którego już 45 00:04:08,680 --> 00:04:09,340 nie 46 00:04:09,520 --> 00:04:16,920 potrzebujemy, zamiast tego dodajmy obraz i szczegóły. Teraz, aby uzyskać szczegółowe informacje, musimy ustawić kierunek wygięcia na wiersz, ponieważ 47 00:04:16,920 --> 00:04:19,180 powinny to być wszystkie szczegóły z rzędu. 48 00:04:19,380 --> 00:04:27,060 Możemy dodać trochę dopełnienia we wszystkich kierunkach, może do 15, a także dodać uzasadnioną zawartość 49 00:04:27,120 --> 00:04:33,550 przestrzeni wokół, aby ładnie rozprowadzić tutaj nasze detale, które powinny być dobre. 50 00:04:35,210 --> 00:04:42,270 Oprócz tego na zdjęciu tutaj musimy również dodać styl, tam szerokość powinna wynosić 100%, powiedzmy, aby 51 00:04:42,440 --> 00:04:48,100 wziąć pełną dostępną szerokość i na wysokość, pójdę z 200, chociaż oczywiście możesz 52 00:04:48,140 --> 00:04:49,580 oblicz to 53 00:04:49,580 --> 00:04:54,680 dynamicznie na przykład za pomocą interfejsu API wymiarów, aby zawsze brać 54 00:04:54,740 --> 00:05:00,720 określoną część dostępnej wysokości lub po prostu bawić się tutaj z różnymi wartościami. 55 00:05:00,890 --> 00:05:03,520 Pójdę z tym i zajrzę tutaj, a to nie 56 00:05:03,740 --> 00:05:04,940 wygląda zbyt nędznie, to nie 57 00:05:04,970 --> 00:05:06,130 jest tak źle. 58 00:05:07,450 --> 00:05:13,990 Teraz możesz zdecydowanie spróbować tutaj dodatkowej pracy, dodatkowych zadań i na przykład pokolorować te szczegóły - 59 00:05:13,990 --> 00:05:20,200 proste, niedrogie i czas trwania w zależności od tego, czy jest raczej krótki, czy w 60 00:05:20,200 --> 00:05:25,810 zależności od różnych wartości, które masz za proste, złożoności i przystępności cenowej . 61 00:05:25,810 --> 00:05:31,150 Nie zrobię tego tutaj, ale możesz oczywiście spojrzeć na dane dotyczące posiłku, aby zobaczyć, jakie mamy wartości, aby 62 00:05:31,150 --> 00:05:37,090 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 63 00:05:37,090 --> 00:05:41,800 złożoności i itd., a następnie możesz dodać kilka elementów, jeśli chcesz zastosować inny styl do różnych 64 00:05:41,800 --> 00:05:47,470 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 65 00:05:47,470 --> 00:05:52,360 zależności od tego, czy jest długi, czy nie. Nie zrobię tego tutaj, ponieważ jest 66 00:05:52,360 --> 00:05:58,150 to tylko dodatkowa praca, która tak naprawdę nie dodaje wiele do nawigacji, która jest 67 00:05:58,150 --> 00:05:59,740 przedmiotem tego modułu. 68 00:05:59,740 --> 00:06:08,110 Zamiast tego skupię się na składnikach i krokach. Pierwszym krokiem jest upewnienie się, że tytuł tutaj 69 00:06:08,530 --> 00:06:10,250 jest odpowiednio stylizowany. 70 00:06:10,330 --> 00:06:17,660 Dodajmy więc tytuł do arkusza stylów, a tam dodam rodzinę czcionek i ustawię, aby otwierała się 71 00:06:19,080 --> 00:06:26,790 bez pogrubienia, ustawię rozmiar czcionki na 22 może i ustawię tekst wyrównując do środka, aby wyśrodkować tekst 72 00:06:26,810 --> 00:06:32,160 na środku, a jeśli sprawdzamy to, wygląda to całkiem ładnie. 73 00:06:32,230 --> 00:06:37,540 Teraz chcę również wyprowadzać moje składniki w moich krokach i dlatego ważne jest, aby zrozumieć, że 74 00:06:37,540 --> 00:06:40,770 w danych fikcyjnych są to tablice, to są moje składniki 75 00:06:40,780 --> 00:06:42,480 na przykład, to są 76 00:06:42,490 --> 00:06:49,540 moje kroki i widzisz, że jest w nich tylko tekst tablice. Chcę po prostu wyprowadzić mój tekst tutaj 77 00:06:49,720 --> 00:06:56,410 jako listę i nie użyję FlatList, ponieważ możesz to zrobić, możesz mieć przewijane pojemniki, że tak 78 00:06:56,410 --> 00:07:01,470 powiem, ale po prostu wyrenderuję składniki i kroki na górze każdego inny. 79 00:07:01,480 --> 00:07:07,690 Więc tutaj możemy zastosować dobre, stare podejście, które znamy z Vanilla React lub React dla 80 00:07:07,690 --> 00:07:14,140 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ą 81 00:07:14,140 --> 00:07:17,640 tablicą ciągów i zamapować to na tablicę składników, w 82 00:07:17,650 --> 00:07:23,230 ten sposób możesz wyprowadzić listę danych w React i React Native i często używasz FlatList, 83 00:07:23,230 --> 00:07:27,660 ale tutaj nie musimy tego robić, ponieważ nie jest to nieskończona ilość, 84 00:07:27,670 --> 00:07:33,300 więc nie potrzebujemy tych optymalizacji i mamy zawijany widok przewijania na całym ekranie, więc będziemy mogli 85 00:07:33,400 --> 00:07:38,050 przewijać, jeśli wyświetlamy więcej niż pasują na ekranie, więc jest absolutnie w porządku, 86 00:07:38,050 --> 00:07:39,950 używając tego podejścia, dlatego tutaj 87 00:07:39,950 --> 00:07:45,220 będę mieć mój pojedynczy składnik w tej funkcji mapy, a mapa jest metodą wbudowaną w 88 00:07:45,220 --> 00:07:46,900 JavaScript, jak wiesz, a 89 00:07:46,990 --> 00:07:50,030 tutaj musimy teraz zwrócić element jsx, a to, 90 00:07:50,170 --> 00:07:55,660 co chcę zwrócić, to komponent tekstowy, w którym po prostu wyprowadzam składnik, ponieważ składniki są 91 00:07:55,720 --> 00:07:56,880 tablicą ciągów, 92 00:07:56,890 --> 00:07:59,010 więc składnik jest tylko łańcuchem, 93 00:07:59,020 --> 00:08:03,280 a następnie tutaj musimy również podać klucz, jest to wymóg React i 94 00:08:03,280 --> 00:08:07,980 możemy użyć składnika jako klucza, ponieważ będziemy zawsze miej każdy składnik tylko raz. 95 00:08:07,990 --> 00:08:10,230 Gwarantuje to, że jest wyjątkowy, 96 00:08:10,240 --> 00:08:12,510 tak powstają nasze posiłki, a dzięki 97 00:08:12,550 --> 00:08:19,520 temu, jeśli uratujemy to i przejrzymy przepis, zobaczymy nasze składniki. Teraz, jeśli chodzi o stylizację, z pewnością możemy 98 00:08:19,520 --> 00:08:21,620 coś tam zrobić i 99 00:08:21,650 --> 00:08:26,960 zrobię to za sekundę, ale zanim to zrobię, pozwólcie, że powtórzę to 100 00:08:26,960 --> 00:08:34,250 dla kroków tutaj, zamień ten tekst na selectMeal. kroki, a następnie wypisuj każdy krok tutaj, który jest również 101 00:08:34,350 --> 00:08:41,910 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. 102 00:08:42,630 --> 00:08:46,730 Teraz znowu styl można nieco ulepszyć i zrobimy to samo i myślę, 103 00:08:47,010 --> 00:08:53,460 że sensowne jest utworzenie osobnego komponentu lub funkcji renderowania w tym celu, a ja utworzę osobny komponent, będziemy przechowywać 104 00:08:53,460 --> 00:08:58,830 go w tym samym pliku chociaż ponieważ używamy go tylko w tym pliku, ale możesz również 105 00:08:58,830 --> 00:08:59,310 utworzyć 106 00:08:59,340 --> 00:09:03,260 nowy plik, całkowicie według Ciebie. Tam będę miał mój 107 00:09:03,270 --> 00:09:11,340 element listy, który odbiera rekwizyty, do których wracam, a teraz chcę użyć widoku, który 108 00:09:11,350 --> 00:09:17,500 importuję jako opakowanie, aby móc stylizować ten pojemnik, a tam 109 00:09:17,500 --> 00:09:24,690 mieć tekst, w którym wyprowadzam rekwizyty potomne a teraz ten widok uzyska styl 110 00:09:24,700 --> 00:09:28,450 ze stylów. ListItem może po to, abyśmy 111 00:09:28,450 --> 00:09:33,490 mogli ładnie to stylizować i tutaj, oczywiście, nie chcę używać tekstu, ale tekst 112 00:09:33,490 --> 00:09:34,630 domyślny, również 113 00:09:34,780 --> 00:09:38,010 tutaj, abyśmy mogli skorzystać z własnego tekstu niestandardowego. 114 00:09:38,170 --> 00:09:47,430 Teraz, jeśli chodzi o styl elementu listy, przejdźmy do arkusza stylów i dodajmy element listy, a każdy 115 00:09:47,460 --> 00:09:55,530 element listy powinien mieć pewien margines, pionowy margines, powiedzmy 10, a poziomy margines, powiedzmy 20, 116 00:09:55,530 --> 00:10:05,600 więc więcej odstępów od lewej i prawej i może dodamy tutaj kolor obramowania o jasnoszarym kolorze z #ccc i 117 00:10:05,600 --> 00:10:09,540 szerokością obramowania 1, zobaczymy jak to wygląda, 118 00:10:09,540 --> 00:10:16,730 a następnie dodamy trochę dopełnienia, 10 we wszystkich kierunkach, a my Zobaczę jak 119 00:10:17,570 --> 00:10:18,930 to wygląda. 120 00:10:18,950 --> 00:10:25,910 Teraz musimy tylko upewnić się, że używamy naszego elementu pozycji na liście i używamy go, zwracając go zamiast tekstu 121 00:10:25,910 --> 00:10:30,590 tutaj podczas generowania składników, nadal przekazujemy składnik między otwierającymi i zamykającymi tagami własnego 122 00:10:30,590 --> 00:10:36,200 niestandardowego składnika, ponieważ tam jesteśmy za pomocą rekwizytów dzieci, które korzystają z treści, które przekazujemy 123 00:10:36,470 --> 00:10:38,920 między otwieraniem a zamykaniem tagów i robimy 124 00:10:39,110 --> 00:10:43,870 to samo dla naszych kroków. Spójrzmy 125 00:10:44,530 --> 00:10:47,520 na to, 126 00:10:47,670 --> 00:10:55,870 tak nie wygląda źle. Dostajemy nasze kroki tutaj, mamy nasze składniki, oczywiście możesz dopracować tę stylizację, 127 00:10:55,870 --> 00:11:02,650 dostosować ją do swoich wymagań, tak, jak chcesz, aby wyglądała, ale tak naprawdę jestem z tego bardzo zadowolony, a dzięki temu 128 00:11:02,650 --> 00:11:08,050 mamy podstawowy szczegół ekran i oczywiście ten ekran szczegółów działa również w przypadku naszych ulubionych, ponieważ 129 00:11:08,050 --> 00:11:10,610 używamy tam jednego i tego samego ekranu. 130 00:11:10,660 --> 00:11:15,500 Wygląda to całkiem ładnie, brakuje ekranu filtru.