Aby nadać styl osobnym przedmiotom, ponownie utworzę osobny komponent i
nadam mu nazwę mealitem. js, nazwa jak
zawsze zależy od ciebie, a tam,
wiesz, gra, tworzymy komponent React,
importując React, prawdopodobnie potrzebujemy również widoku, tekstu i arkusza stylów, a może
także innych rzeczy z React Native. Następnie ustawiamy komponent, przedmiot posiłku, w którym otrzymujemy rekwizyty i
gdzie w końcu zwracamy trochę jsx. Skonfiguruj tutaj arkusz stylów, przechowuj go w stałej stylach wraz z
tworzeniem arkusza stylów, do którego przekazujemy obiekt, a na koniec eksportujemy tutaj nasz posiłek jako domyślny plik. Teraz z tym tutaj, w elemencie posiłku, w tym
komponencie, oczywiście musimy zwrócić kod
jsx dla tego elementu posiłku i to jest coś, co otrzymuję z ekranu kategorii
posiłków. Tutaj mam
ten widok z moim tekstem, to w końcu chcę, aby wynik był nieco bardziej skomplikowany, ale wytnę go
i przeniosę na przedmiot posiłku i tam, zwrócę ten widok tutaj, ale
z oczywiście, że nie skończyliśmy z tym. Po pierwsze, powinno to być
również dotykalne, ponieważ możemy wybrać posiłek, możemy wybrać taki przepis, który zostanie
przeniesiony na ekran szczegółów, więc zaimportuję dotykowe krycie.
Teraz, oczywiście, możesz ponownie wprowadzić to rozróżnienie i użyć efektu tętnienia z
dotykową natywną informacją zwrotną
na Androida, jeśli chcesz, pójdę teraz z kryciem dotykowym i zawinę mój widok tutaj z dotykowym kryciem, tak abyśmy
mogli faktycznie dotknij naszego przedmiotu tutaj i onPress, tak naprawdę chcę uruchomić funkcję, której spodziewam się uzyskać w nieruchomości, której jeszcze nie przechodzimy
do pozycji posiłku, ale ponieważ nie korzystamy jeszcze z pozycji posiłku
nigdzie, ale którą zamierzam przekażemy w przyszłości, może nazwiemy to na wybranym posiłku lub
po prostu wybierz, cokolwiek zechcesz, nazwiemy to na SelectSeal i oczekuję, że otrzymam ten rekwizyt na
elemencie posiłku, gdy użyjemy go w jsx. To jest dotykalne nieprzezroczystość, tam
mam mój widok z tytułem i faktycznie ten widok powinien być nieco bardziej złożony.
Chcę mieć widok, taki widok zagnieżdżony, a inny widok poniżej, więc chcę mieć
dwa wiersze.
Zostanie to ustawione jako kolumna, ale te dwa widoki tutaj będą ustawione jako wiersze tutaj.
Pierwszy widok powinien również renderować obraz tła, tak aby tytuł znajdował się przed tym obrazem tła,
drugi
widok, drugi wiersz tutaj powinien renderować pewne szczegóły dotyczące wybranej receptury, takie
jak jej złożoność i czas trwania.
Zacznijmy od tego, zanim później dodamy obraz, w obu tych widokach
dodam zatem właściwość style i wskażę stylowy wiersz posiłku lub
cokolwiek, jak chcesz to nazwać, ponieważ będzie to wiersz w mojej prezentacji
posiłku, a ja Dlatego dodam tam wiersz posiłku i oczywiście ustawię kierunek Flex na wiersz, ponieważ powinny
to być wiersze danych. Teraz, wokół ogólnego przedmiotu,
zawinę inny widok, w którym chcę ustawić
ogólny styl stylów posiłku i posiłku, który również jest
skonfigurowany tutaj w arkuszu stylów i tam chcę nadać każdemu posiłkowi
wysokość z 200 powiedzmy, że każdy element na liście tutaj i szerokość
100%, aby wziąć pełną dostępną szerokość, a także może kolor tła tego szarawego wyglądu tutaj, możemy
zobaczyć, czy chcemy to zachować, na razie będę użyć tego.
Teraz możemy użyć elementu posiłku tutaj i jeszcze z
nim nie skończyliśmy, ale możemy zacząć używać go tutaj na ekranie kategorii posiłków, oczywiście importując go, importując element posiłku z folderu komponentów i tam,
z pliku elementu posiłku a następnie renderuj to tutaj, więc zwróć tutaj przedmiot posiłku w ten sposób i oczywiście musimy teraz przekazać jakieś dane, takie jak
tytuł, który otrzymujemy z itemData. pozycja. tytuł i rekwizyt onSelect, który
spodziewam się dostać do pozycji posiłku, którą w końcu podpinamy do dotykowej propozycji krycia onPress prop,
onSelectMeal, to nazwa, którą wybrałem, to także coś, co
musimy ustawić
tutaj, kiedy używamy posiłku item i
powinno to wskazywać na funkcję, która na razie nic nie robi,
ale która później załaduje stronę ze szczegółami tego posiłku.
Więc teraz otrzymujemy tytuł na tytułowym rekwizycie, stąd element posiłku, tutaj, gdy wypisujemy tytuł, robimy to za
pomocą rekwizytów. tytuł.
Jeśli teraz to uratujemy, powinniśmy być w stanie coś zobaczyć, więc poczekajmy na to, aby ponownie się załadować i tak,
widzimy tutaj nasz
posiłek i na pewno nie jest zbyt piękny, ale przynajmniej widzimy coś więcej niż wcześniej.
Teraz chciałbym mieć trochę odstępów wokół listy, ale wewnątrz odstępu element
listy powinien mieć pełną dostępną szerokość, a nie tylko szerokość najszerszego elementu,
co się aktualnie dzieje.
W tym celu możemy przejść do FlatList i tam dodać właściwość style i ustawić tę szerokość na 100%, aby
upewnić się, że FlatList przyjmuje całą szerokość, jaką może uzyskać.
Dzięki temu powinniśmy wyglądać, jak chcemy tutaj.
Teraz oczywiście rzeczy do posiłku nie są gotowe, nie wyglądają
tak, jak chcę, ale powoli do nich docieramy. Teraz w MealItem. pliku js, wciąż pozostaje
nam jednak trochę do zrobienia, na
przykład ten widok z tytułem będzie później zawierał obraz i dlatego powinien być o wiele
większy niż wiersz poniżej, który później po prostu wyświetli niektóre szczegóły.
Stąd tutaj połączę moje style wierszy posiłku z innym obiektem stylu, więc ze stylem ustawionym w innym obiekcie arkusza stylów, który nazwiję
nagłówek posiłku lub cokolwiek, co chcesz nazwać i tak samo tam na marginesie dla
szczegółów na koniec połączę to
ze szczegółami stylów posiłków, dzięki czemu połączyliśmy style i zacznijmy od nagłówka posiłku, który
możemy ustawić tutaj.
Nagłówek posiłku na końcu pomieści obraz, a także tytuł i chcę, aby jego
wysokość wynosiła 80%
dostępnej wysokości, więc powinna być bardzo bardzo duża. Szczegóły posiłku automatycznie otrzymają pozostałe 20%, oczywiście i aby zobaczyć,
czy to działa, wyślijmy kilka szczegółów tutaj, więc w tym widoku tutaj, w tym rzędzie poniżej naszego
wiersza tytułowego, chcę też mieć
jakiś tekst tu i tam I Wyprowadzę,
powiedzmy, czas trwania rekwizytów, a następnie m później, przez minuty, ponieważ m czas trwania będzie liczbą, którą traktujemy
jako minuty.
Musimy tylko przejść czas trwania z ekranu kategorii posiłków, więc
kiedy używamy przedmiotu posiłku, oprócz podania tytułu, ustawię rekwizyt czasu trwania, ponieważ teraz oczekujemy
tego na elemencie posiłku.
Otrzymujemy to z itemData. przedmiot, który jest naszym posiłkiem, i tam będziemy
mieli właściwość czasu trwania, ponieważ nasze posiłki zdefiniowane w tym modelu mają właściwość czasu trwania
i rzeczywiście, jeśli spojrzysz na dane manekina, tutaj jest twój czas trwania, który jest podawany .
Jeśli to uratujemy,
teraz widzimy tam swój czas trwania i faktycznie możemy tutaj zmienić tę wysokość nawet na 90%, powinna być wyższa niż
tutaj, co wygląda lepiej i
oczywiście
możesz z tym eksperymentować. W wierszu ze
szczegółami posiłku chcę też wstawić poziome wypełnienie, więc po lewej i prawej stronie powiedzmy 10
i uzasadnij moją treść tutaj odstępem między, pamiętaj, że to wiersz, więc uzasadni to poziomo, tak że gdy będziemy mieli
wiele przedmiotów, będą tam ładnie dystrybuowane.
Mamy więc 20 minut, wypiszmy tam więcej informacji, dodając kolejny tekst,
i
tam, wypowiedzmy złożoność, więc tutaj wypiszę złożoność,
a następnie wyślemy przystępność. Teraz musimy również przekazać te dane podczas tworzenia naszego posiłku.
Tutaj oprócz czasu trwania mijamy złożoność,
którą tu otrzymujemy, itemData. pozycja. złożoność i przystępność cenowa, to oczywiście
itemData. pozycja. przystępność cenowa,
i tak, a jeśli to zapiszemy i pozwolimy na ponowne renderowanie, teraz widzimy ten wynik tutaj. Wciąż niezbyt piękne i zdecydowanie możemy to
poprawić, ale dobry początek. Teraz proste i niedrogie lub nasza złożoność i przystępność
cenowa, które powinny być nieco inaczej zaprojektowane. Wiemy, że będzie to tekst i dlatego
mogę korzystać z niektórych funkcji JavaScript lub metod, które mamy dostępne na ciągach, po
prostu użyję toUppercase, aby przekonwertować go na wielkie litery całkowicie w ten sposób, a teraz powinno to
już wyglądać nieco ładniej niż wcześniej. Teraz możesz jeszcze ulepszyć stylizację tutaj, na razie pójdę z
tą stylizacją i dodajmy teraz obraz tła powyżej.
W tym celu chcieliśmy obrazu tła za tym tekstem tytułu i na szczęście React Native sprawia, że
dodanie takiego obrazu tła jest naprawdę bardzo proste. React Native dostarcza z wbudowanym komponentem, komponentem tła
obrazu, którego możemy użyć do renderowania obrazu w tle, tak jak można
by to sobie wyobrazić po nazwie. Dodajesz go obok komponentu, za którym chcesz go dodać, i dodajesz go przed tym
komponentem, więc tutaj dodaję tło obrazu i na tle obrazu, tak jak na normalnym obrazie, ustawiasz źródło. Tutaj moim źródłem jest obraz internetowy, więc przekazujemy obiekt, jeśli
byłby to obraz lokalny, użyłbyś wymagania i czego nauczyłeś się o obrazach lokalnych wcześniej, ale
tutaj jest to obraz internetowy, więc przekazujemy obiekt z rekwizytem URI i tam
używamy obrazu rekwizytów, gdzie spodziewam się uzyskać ten adres URL w tym komponencie, więc oczywiście musimy
upewnić się, że podamy adres URL tego rekwizytu. Dodam też trochę
stylizacji i będą to style. bg Obraz, który teraz dodamy do arkusza stylów tam, gdziekolwiek
chcesz, może tutaj, nie ma tak naprawdę znaczenia. Ważną rzeczą jest tutaj ustawienie szerokości
i wysokości, ponieważ jest to obraz z Internetu, a ja wykorzystam je
w 100% dla obu, ponieważ powinien on wypełnić całą dostępną przestrzeń. Teraz musimy tylko upewnić się, że przekazujemy tę propozycję obrazu tutaj na ekranie kategorii
posiłków, więc oprócz tytułu chcę tutaj również przekazać itemData. pozycja. imageUrl to jego nazwa, widać to w modelu,
imageUrl, więc to właśnie przekazujemy i przekazujemy to do podpory obrazu, ponieważ tego właśnie oczekujemy
i co ustawiamy tutaj w posiłku pozycja. A jeśli teraz to zapiszesz i pomieszajmy
i przetestujmy to na Androidzie, ładowanie zajmuje trochę więcej czasu, dlatego zwykle używam tutaj iOS,
ale teraz, jeśli to przetestujemy, zobaczymy tutaj naszego burgera. To, czego już
nie widzimy, to nasz tytuł. Aby ponownie wyświetlić tytuł, upewnij się, że
faktycznie otaczasz tło obrazu, w ten sposób mówisz React Native, która zawartość powinna znajdować
się nad tym obrazem tła. Więc teraz, oto nasz tytuł, nie tak łatwy do odczytania i naprawimy to, ale znowu tam jest.
Więc zaczynamy od tego przepisu tutaj, teraz upewnijmy się, że tytuł
jest nieco łatwiejszy, nadając mu styl tutaj, tytuł stylów, który możemy teraz tam ustawić i chcę ustawić rodzinę czcionek otwartych
bez pogrubienia,
ma sens, ponieważ rejestrujemy tę czcionkę.
Podaj rozmiar czcionki, który nieco zwiększymy, może 22, możesz
oczywiście się tym pobawić.
Nadaj mu kolor biały, aby był nieco łatwiejszy do odczytania, a także przypisz kolor tła, abyśmy zawsze
mogli go zobaczyć, nawet jeśli obraz tła byłby biały,
w takim przypadku biały tekst byłby trudny do odczytania, podając jest to kolor RGBA, który ma kolor,
który ma wbudowaną przezroczystość, że tak powiem, a jest to po prostu czarny kolor, który
jest nieco przezroczysty, a teraz również dodaj
trochę wypełnienia, wypełnienie pionowe pięciu powinno wyglądać dobrze, aby kolorowe tło w tle nie znajduje się dokładnie na krawędziach
tekstu wewnątrz pudełka, a wypełnienie może być ustawione poziomo na 12. Dzięki temu powinniśmy zawsze widzieć
nasz tytuł i faktycznie możemy tutaj zwiększyć tę
przezroczystość, zmniejszyć krycie, tak,
jak
sądzę, wygląda to trochę ładniej. I jedyne, co chcę teraz zrobić, to przesunąć
ten tytuł w dół na dole tego obrazu,
a zatem w stylu bgImage, który tu mam, ustawię justowanie zawartości, aby wygasła, ponieważ obraz tła automatycznie działa jako Flexbox, że tak powiem, jak
widok, dzięki czemu możemy uzasadnić naszą zawartość, a teraz mamy
ten tytuł na dole.
Moglibyśmy teraz wyśrodkować tekst, przechodząc do tytułu tutaj i dodając wyrównywanie tekstu do środka, a jeśli jest zbyt długi,
zbyt duży, oprócz oczywiście
zmniejszenia rozmiaru czcionki, co zrobię trochę do 20, oczywiście
możesz przejdź do tego tekstu, w którym podajesz tytuł, i ustaw liczbę wierszy na
1, a to zapewni automatyczne skrócenie
tekstu, jeśli jest zbyt duży, jak w przypadku sałatki z pomidorami koktajlowymi. Widzimy również dziwny efekt tutaj na iOS,
gdzie mamy dodatkowe tło za tekstem, a nie tylko kolorowe pole w tle.
To dlatego, że zastosowałem kolor tła i tak dalej, bezpośrednio na tekście, aby to naprawić, możemy wyciąć go z
tytułu tutaj i tylko ustawić kolor itd. I zamiast tego dodać kontener tytułu tutaj, gdzie dodajemy
ten kolor tła i tak dalej i owiń ten kontener wokół naszego tytułu, więc dodamy tutaj dodatkowy widok,
a w React Native jest całkiem normalne, że zagnieżdżamy wiele takich widoków, a
na tym widoku możemy teraz dodać styl, styl kontenera tytułu i jeśli to zapiszemy, powinniśmy pozbyć się tego dziwnego zachowania na iOS,
tak, teraz
nie mamy tego dodatkowego pola, zamiast
tego mamy tylko jeden kolor tła i to samo na Androidzie.
Więc teraz nie wygląda to tak źle, ale nie jestem
do końca szczęśliwy, chciałbym również wyśrodkować tutaj moje szczegóły pionowo i dać trochę więcej miejsca, jak sądzę,
i za to możemy dać nagłówek może 85% wysokości i szczegółów posiłku tutaj, pamiętaj, że naszym kierunkiem elastyczności jest
rząd, ponieważ łączymy tutaj rząd posiłku i szczegół posiłku, a zatem nasza oś poprzeczna jest od
góry do dołu, więc jeśli
chcemy wyśrodkować w pionie, to znaczy oś poprzeczna, na której musimy wyśrodkować.
Więc tutaj możemy ustawić wyrównywanie elementów, które ustawiają pozycjonowanie osi poprzecznej na środek,
a także zmienić tutaj kolor na nieco ładniejszy kolor, ten
bardzo jasny szary # f5f5f5 może wyglądać nieco lepiej, tak,
zdecydowanie .
Teraz, aby upewnić się, że naprawdę wyśrodkowujemy w pionie, musimy bardziej precyzyjnie określić
wysokość, jaką powinny przyjmować
nasze szczegóły posiłku, bierzemy 85% na nagłówek, więc tutaj, na szczegółach, możemy oczywiście ustawić
wysokość 15% jeśli chodzi o resztę, tak i powiedziałbym, że tutaj wygląda to całkiem przyzwoicie, na pewno
wypisz elementy, z którymi możemy tu pracować.
Dodam teraz trochę promienia granicy, ponieważ wiesz, że lubię promienie
granicy, więc dodam tutaj promień granicy 10, abyśmy mieli zaokrąglone rogi, a jeśli wrócisz, my ' już
prawie tam jest, ale zauważysz, że obraz faktycznie nie przestrzega promienia granicy.
Teraz, aby to naprawić, na elemencie posiłku musimy po prostu powiedzieć, że przepełnienie jest ukryte, aby żaden element podrzędny nie mógł wyjść poza
to miejsce lub ten kształt, który tutaj
budujemy.
I z tym to początek, coś, z czym możemy
pracować, teraz oczywiście chcemy się upewnić, że kiedy dotkniemy takiego elementu, faktycznie przejdziemy do strony szczegółów.