Pracujmy teraz na ekranie zamówień i wypiszmy więcej niż tylko ten nudny tekst.
Teraz, podobnie jak w przypadku ekranu koszyka i ekranu przeglądu produktów, chcę bardziej złożonego
przedmiotu zamówienia, dlatego utworzę osobny element zamówienia w folderze składników i tam w folderze sklepu.
Jak zawsze to Ty decydujesz, czy
to zrobisz, ale ponieważ nie będzie to super mały komponent, wolę mieć go w osobnym pliku.
Więc zaimportuję React z React tutaj i nic dziwnego, że zaimportuję kilka rzeczy z React
Native, a byłby to widok, tekst, arkusz stylów, ponieważ z pewnością skonfigurujemy również niektóre style, a także
przycisk, ponieważ ja również chcemy mieć możliwość rozszerzenia zamówienia, abyśmy nie zawsze widzieli wszystkie elementy wchodzące w skład
zamówienia, ale abyśmy mogli je zobaczyć, jeśli chcemy. Teraz dzięki temu możemy stworzyć tutaj stałą pozycji zamówienia, tak
że będzie to sam komponent, który odbiera rekwizyty, a następnie w końcu będzie miał tutaj swoje ciało i zwróci
trochę kodu jsx i potrzebujemy tutaj obiektu stylów z arkuszem stylów. Utwórz w ten sposób,
a także domyślnie pozycję zamówienia eksportowego.
Jak powinien wyglądać przedmiot zamówienia?
Teraz, jak zawsze, to zależy od ciebie, ale będę pracować z widokiem tutaj i moim pomysłem jest to, że
zawsze pokazuję jak całkowitą kwotę tego zamówienia i datę, a następnie przycisk pokaż szczegóły, który możemy nacisnąć, aby wyświetlić
poszczególne elementy które są częścią zamówienia, a dla tych produktów faktycznie użyję tutaj elementu koszyka,
ponieważ chcę renderować dokładnie te same elementy, które wyświetlam w koszyku.
Więc faktycznie zaimportuję element koszyka z elementu koszyka i ponownie użyję tego elementu tutaj.
Wróćmy jednak do tego kodu
jsx, więc mamy widok zawijania wokół całego obiektu zamówienia, cały wpis naszego zamówienia tutaj.
Teraz tam chcę mieć pierwszy wiersz i dlatego użyję innego widoku,
abyśmy mogli odpowiednio stylizować ten tekst, który powinien zawierać tekst, który wyświetla naszą sumę, powiedzmy, sumę tego porządku, powiedzmy, i
inny tekst, w którym pokażę data i powinna znajdować się w tym samym rzędzie, a odstęp między nimi.
Pod nimi, jak już wspomniałem, powinien znajdować się przycisk, który możemy nacisnąć, aby wyświetlić szczegóły, które następnie pokazują wszystkie
elementy, które są częścią tego zamówienia. Teraz, przy takiej konfiguracji,
jasne jest, że kwota tutaj powinna być otrzymywana za pomocą rekwizytów.
Tak więc spodziewam się, że dostanę rekwizyt ilościowy i zadzwonię do fixed 2, aby wyprowadzić odpowiednią liczbę
miejsc dziesiętnych. Teraz, jeśli chodzi
o datę, chcę podać datę rekwizytów tutaj, abyśmy mieli datę, którą możemy wygenerować. Jeśli chodzi o stylizację, ogólnie chcę tutaj przypisać
styl elementu zamówienia, abyśmy mogli stylizować całe zamówienie, a potem tam, potrzebujemy,
powiedzmy, podsumowania stylów, abyśmy mogli stylizować ten wiersz i
odnośnie do tekstu tutaj, powinien mieć styl, powiedzmy, całkowitą kwotę, jak zawsze te identyfikatory stylu zależą od
ciebie,
tutaj chcę mieć styl daty.
Przycisk powinien również mieć swój własny kolor, który otrzymam ze stałej kolorów, dlatego należy dodać ten
import i
tam użyję mojego podstawowego koloru. Okej, więc to wszystko
na
teraz, wrócę do szczegółów za
chwilę, teraz zastosujmy tutaj stylizację, abyśmy mogli coś zobaczyć. W przypadku samego przedmiotu zamówienia ponownie użyję
wyglądu koszyka, który już mam w produkcie, więc skopiuję wszystkie te ustawienia tutaj z produktu
i przeniosę je na przedmiot zamówienia, aby zastosować
cień , kolor tła, promień obramowania - wszystko to należy zastosować.
Ponadto dodam margines 20 we wszystkich kierunkach, aby każdy element zamówienia miał trochę odstępów wokół niego.
Wewnątrz przedmiotu zamówienia chcę też mieć wypełnienie o wartości 10, aby zawartość nie znajdowała
się bezpośrednio na krawędziach otaczającej granicy i tak dalej. Teraz w podsumowaniu, które jest tym widokiem, który
zawiera dwa fragmenty tekstu, tam stylizacja powinna
być taka, że mamy oczywiście elastyczny kierunek rzędu, ponieważ przedmioty
powinny siedzieć obok siebie. W treści uzasadnienia powinna
znajdować się spacja, a poza tym wyrównywane elementy powinny być wyśrodkowane, tak aby na osi poprzecznej, która jest
tutaj osią pionową, elementy były wyśrodkowane.
Chcę również upewnić się, że zajmujemy tutaj pełną dostępną szerokość, aby rozpowszechniać tekst. Teraz, jeśli chodzi o całkowitą kwotę,
jaką jest styl zastosowany do tego pierwszego fragmentu tekstu, który generuje ilość, tam, jak zawsze, możesz stylizować go,
jak chcesz, ale ustawię rodzinę czcionek open sans pogrubioną, aby użyć tej odważnej
wersji mojej czcionki i dajmy czcionkę o rozmiarze 16, powiedzmy, a następnie dla daty, która jest moim stylem, zastosowałem
tutaj tekst tej daty, tam też w końcu
chcę użyć czcionki o rozmiarze 16, ale rodzina czcionek będzie po prostu otwarta bez sansa,
bez odważna
wersja, a dodatkowo możemy tutaj również użyć tego ciemnoszarego koloru. Teraz spróbujmy i użyjmy tego elementu
zamówienia na ekranie zamówień.
Więc tam najpierw musimy zaimportować przedmiot zamówienia, a następnie oczywiście przejść do folderu
komponentów, tam do folderu sklepu, a następnie zaimportować przedmiot zamówienia z tego pliku przedmiotu
zamówienia i tutaj
zamiast renderowania tego tekstu, teraz renderujemy ten element zamówienia tutaj jako tag samozamykający się i
oczywiście musimy to skonfigurować.
Wymaga to od nas podania kwoty i daty, a następnie również szczegółów, więc pozycje
w kolejności, ale
to nastąpi w drugim etapie.
Więc na razie tutaj musimy podać kwotę, a to oczywiście po prostu itemData. element, który jest pojedynczym zamówieniem, nie zapomnij, że przeglądamy
tutaj wszystkie
zamówienia, które są tablicą zamówień, więc jest to pojedyncze
zamówienie, a tam,
jeśli spojrzymy na nasz model zamówień, jest przechowywany w pole kwoty całkowitej, data jest następnie
zapisywana w polu daty.
W tym miejscu uzyskujemy dostęp do pola całkowitej kwoty i dla propozycji daty, którą musimy również przekazać,
możemy uzyskać dostęp do itemData. pozycja. data. Jeśli teraz to
zapiszemy i przyjrzymy się temu, dodajmy tutaj trochę treści, zamów to, a następnie przejdź do ekranu naszych zamówień i otrzymamy ten błąd.
Odnosi się to teraz do obiektów, które nie są prawidłowe, jak powinien React, i
pokazuje nam, że ostatecznie jest to obiekt stanu, z którym ma problem, i ma to sens, ponieważ data w naszej kolejności,
gdy tworzymy ją tutaj w naszym sklepie Redux, jest datą Javascript obiekt.
Teraz nie możemy wyprowadzać tego jako takiego tekstu. Aby go wydrukować,
możemy przejść do naszego modelu, który jest w końcu schematem, którego używamy
do tworzenia zamówień, aw modelu zamówień możemy zrobić coś, czego wcześniej nie robiliśmy, możemy dodać
do tego metodę model, a ściślej, getter, który jest domyślną funkcją Javascript współczesnego Javascript.
Więc tutaj możemy użyć słowa kluczowego get, a następnie dowolnej wybranej nazwy, takiej jak czytelna data,
która jest jak funkcja, ale nie funkcja, którą wywołujesz jak funkcję, ale do której masz
dostęp jak właściwość na końcu, która zwraca obliczoną wartość i tam Chcę zwrócić tę datę, więc obiekt daty, który
jest przechowywany dla tego obiektu, ale następnie możemy wywołać locale ciąg daty, który jest wbudowaną metodą Javascript, której możemy użyć na obiektach daty,
aby przekonwertować ten obiekt na datę czytelną dla człowieka. Tam przekazujemy język, dla którego chcemy na
przykład zoptymalizować go w ten sposób, a teraz możemy to skonfigurować za pomocą
drugiego argumentu, którym jest obiekt JavaScript. Tam możesz zdefiniować, w jaki
sposób rok powinien zostać skonfigurowany i załączony, znajdziesz szczegółowe dokumenty
dla tej metody, jeśli chcesz dowiedzieć się wszystkiego o tym, a na przykład możemy ustawić rok
na numeryczny, miesiąc na długi, dzień na numeryczny, godzina do dwóch cyfr i minuta również do dwóch cyfr.
Teraz mamy tę czytelną właściwość daty, do której możemy uzyskać dostęp do dowolnego elementu
zamówienia i na razie na ekranie zamówień, zamiast przekazywać obiekt danych w ten sposób, uzyskuję
dostęp do czytelnej daty, która jest teraz tą nową właściwością gettera, którą dodaliśmy i co teraz zobaczysz, że
jeśli ponownie złożę to zamówienie, klikając teraz zamówienie i teraz przejdę do moich zamówień, teraz zobaczysz całkowitą kwotę i tę
czysto sformatowaną datę, a teraz, jeśli zrobię to samo na Androidzie i złożę zamówienie tutaj i idę
do ekranu moich zamówień, widzisz tam to samo. Teraz chcę tylko trochę ulepszyć ten przycisk, ogólnie także
na iOS, nie powinien być tak szeroki, nie tak szeroki tutaj. Więc w komponencie zamówienia, w którym mam ten przycisk, w
końcu możemy tutaj wyświetlić ten widok, możemy dodać wyrównywanie elementów do środka, aby wyśrodkować zawartość wzdłuż osi poprzecznej od lewej do prawej, a zatem teraz, jeśli spróbuję to ponownie i składam
to zamówienie i przechodzę do zamówień, widzicie, że nie można go tam nacisnąć i jest jeszcze wyraźniej na
Androidzie, jeśli go tam załadujemy i naprawdę szybko złożę to zamówienie,
przejdź do ekranu zamówień, teraz mamy ten przycisk. Teraz oczywiście celem jest, aby po
naciśnięciu tego przycisku kolejność rozwijała się tutaj. Przy okazji zauważysz, że ta data nie
jest wyświetlana poprawnie, więc
to kolejna rzecz, którą musimy naprawić.
Teraz przyczyną tego niepoprawnego wyświetlania jest sposób, w jaki React Native działa wewnętrznie, który
silnik JavaScript używa wewnętrznie i ten, którego używa dla Androida tam lub na platformach Android, po prostu
nie obsługuje tej przyjemnej metody lokalizacji łańcucha daty, której tu używam .
Silnik używany na iOS działa, ale
na Androidzie, tak nie jest, co jest oczywiście niewygodne i niezbyt świetne.
Co możemy zrobić na Androidzie, aby to naprawić?
Rozwiązaniem jest zainstalowanie oddzielnej biblioteki, która nazywa się momentem. js, zainstalowaliśmy z npm install -
zapisz moment.
Jest to biblioteka innej firmy, która będzie
działać na obu platformach, dzięki czemu formatowanie dat jest również bardzo proste.
Poczekajmy więc na zakończenie tej instalacji.
Teraz, gdy jest zainstalowany, importujesz wszystko od razu i z właśnie zainstalowanej biblioteki, a teraz
możesz go użyć w tym pliku tutaj.
Teraz możemy to tutaj skomentować i zamiast tego zwrócić moment, wykonany jak funkcja i przekazać
to. date,
więc obiekt daty, który chcemy sformatować i wywołać format. Teraz format zajmuje ciąg, w którym możesz skonfigurować sposób formatowania tego i
załączony, znajdziesz również link do oficjalnych dokumentów, w których możesz dowiedzieć się
wszystkiego o możliwościach, które tam masz.
Teraz tutaj, jeden przykład, jeden sposób sformatowania tego, powiedzmy długi miesiąc, który robisz z 4
dużymi Ms, a następnie o, aby mieć ładnie sformatowaną datę w tym miesiącu, wynik w
każdym dniu, rok reprezentowany przez cztery cyfry i wtedy godzina zawsze jest reprezentowana przez dwie cyfry i minuty, a teraz, jeśli
to zapiszemy i spróbujemy,
zacznij od iOS, dodaj to tutaj do koszyka, przejdź do koszyka i zamów to, a teraz przejdź do
zamówień, to wygląda
dobry.
A teraz, jeśli wypróbujemy to również na Androidzie, zamówimy
to, a następnie przejdziemy do zamówień, teraz też wygląda to ładnie.
Teraz to drobna poprawka, teraz popracujmy nad przyciskiem
i nadaj mu trochę odstępów, oprócz zmniejszenia jego rozmiaru, i można to zrobić, przechodząc do podsumowania
tutaj, które jest stylem stosowanym do widoku zawierającego dwa fragmenty tekstu, tam możemy
po prostu dodać margines na dole powiedzmy 15, abyśmy mieli trochę odstępu między tym wierszem podsumowania, którym
jest ten wiersz tekstu u góry, a przyciskiem poniżej. Więc dodam to do mojego koszyka tutaj, zamów to, a następnie wróć tutaj, przejdź do zamówień,
teraz wygląda to dobrze.
Teraz upewnijmy się, że
przycisk pokaż szczegóły również coś robi.