Jest kilka rzeczy, w których
moglibyśmy kontynuować, ale chcę kontynuować z kontenerem wejściowym, który jest kontenerem
wokół tych danych wejściowych, więc wokół zaznaczenia tekstu liczbowego, wokół wprowadzania tekstu tutaj i wokół przycisków, a
ten kontener ma szerokość i wyrównuje elementy, ale jak
opisałem wcześniej, byłoby miło mieć tę kartę,
aby tam szukać i potrzebujemy bardziej egzotycznych stylów, które brzmią naprawdę fantazyjnie, ale po
prostu kilka zasad stylu, których wcześniej nie stosowaliśmy.
Na przykład chcę dodać cień, delikatny cień
i robisz to z czterema podstawowymi właściwościami, których możesz użyć. Kolor, przesunięcie, krycie i promień.
Teraz kolor cienia powinien być wyraźny, to kolor twojego cienia.
Przesunięcie cienia to przesunięcie względem kontenera, które faktycznie
bierze obiekt, który następnie przyjmuje szerokość i wysokość, więc można powiedzieć,
że chcę przesunąć cień o dwa piksele w odniesieniu do szerokości i dwa piksele
w odniesieniu do wysokości , który wpływa na tworzony efekt trójwymiarowy. Krycie opisuje, jak przezroczysty jest ten cień, jeśli ustawisz
krycie na 1,
wtedy masz całkowicie przezroczysty, więc bardzo widoczny silny cień, a jeśli go zwiększysz lub zmniejszysz, powinienem
powiedzieć, jeśli ustawisz go na 0. 1 na przykład
masz cień, którego ledwo widać. Promień cienia opisuje w zasadzie, jak ostry jest
ten cień, jeśli ma nierówne krawędzie lub jeśli jest nieco bardziej rozmazany, bardziej miękki, itp.
Więc tutaj wybiorę cień w kolorze czarnym, przy okazji, możesz również użyć tutaj
kodów szesnastkowych, jeśli chcesz, a także możesz użyć kodów RGBA, jeśli wolisz, albo normalne kody RGB, albo też
z alfą kanał opisujący tutaj przezroczystość. Chociaż przezroczystość tutaj nie będzie miała bezpośredniego
wpływu, dla cienia trzeba to ustawić z kryciem cienia. W przypadku innych kolorów miałoby to wpływ,
ale to tylko dodatkowa uwaga. W załączeniu znajdziesz link ze szczegółowymi informacjami
na temat konfigurowania kolorów i wartości kolorów, które React Native akceptuje, ponieważ oczywiście jest to o
wiele bardziej wyczerpujące niż to, co mogę tutaj pokazać, po prostu pójdę z nazwą, ponieważ
chcę czarny kolor, więc dlaczego nie skorzystać z tego skrótu? Teraz oprócz koloru tutaj cień również otrzyma
przesunięcie i, jak powiedziałem, przesunięcie tutaj bierze obiekt.
Teraz, jeśli zastanawiasz się, skąd to wiem, na przykład moje IDE mówi mi, że jeśli zacznę wpisywać tutaj przesunięcie
cienia, zobaczysz wskazówkę, którą dostaję po prawej stronie, normalnie powinieneś to również otrzymać, ale
na wypadek, gdybyś nie zdobądź to, oficjalne dokumenty są oczywiście miejscem, do którego należy się udać, zawsze
pod przewodnikami, komponentami i interfejsami API, możesz kliknąć tam komponent widoku lub po prostu kliknąć dokumenty
API tutaj w prawym górnym rogu, a następnie wybrać widok tam i tam znajdziesz rekwizyt stylu, a następnie możesz znaleźć listę wszystkich obsługiwanych
stylów widoku i oczywiście także sposób ich konfiguracji, a tam na przykład dowiedziałeś się, że przesunięcie
cienia jest obiektem z liczbą i wysokość. Jeśli chodzi o kolor, nauczyłeś się, że to
przyjmuje kolor i to jest dokładnie link, który znajdziesz tutaj, w którym opisano,
jakiego rodzaju kolorów możesz użyć.
Więc to tylko mała uwaga, tutaj użyję przesunięcia cienia o szerokości zero, ale wysokości 2,
aby mój cień był przesunięty nieco w dół, żeby powiedzieć, że nie tak bardzo w prawo, więc wcale
nie po prawej stronie, a następnie dodam promień cienia, który jest liczbą, dajmy szóstce szansę i zobaczmy, co to
robi, i wreszcie,
ale nie mniej ważne, nieprzezroczystość cienia równą 0. 26, który jest względnie przejrzysty, ale wydaje mi się,
że wygląda całkiem ładnie.
Ponadto dam pojemnikowi wejściowemu kolor tła biały, aby upewnić się, że jest zawsze biały i
nieprzezroczysty, co w innym przypadku jest domyślnym, więc jeśli chcielibyśmy mieć
inny kolor tła za kontenerem, powiedzmy jako podstawowy kolor cały ekran, pojemnik tutaj
zawsze miałby białe tło.
Teraz, jeśli to zapiszesz, powinieneś zobaczyć cień, który wygląda mniej więcej tak
na iOS, ale nie widzisz cienia w ogóle na Androidzie
i to nie jest błąd, zamiast tego właściwości cienia działają tylko na iOS i pozostawia jeden ważny pytanie, jak
więc ustawić cień na Androidzie? Czy to nie jest możliwe?
Jest tam, ale masz specjalny rekwizyt w stylu, rekwizyt wysokościowy. Działa to tylko na Androidzie, podobnie jak
podpowiedź, platforma Android, podczas gdy właściwości cienia działają tylko na iOS. Teraz elewacja zajmuje po prostu powiedzmy 5, a następnie
korzysta z domyślnej elewacji projektu materiału na Androida, więc masz tam mniej kontroli, ale z
drugiej strony otrzymujesz domyślny wygląd projektu materiału, do którego użytkownicy mogą
być przyzwyczajeni, więc to jest dobrą rzeczą w tym, a teraz mamy
też cień na Androida i iOS. Na iOS zauważysz również, że cień jest widoczny również po
lewej i prawej stronie pudełka, mimo że podałem to przesunięcie cienia o 0 dla szerokości, którą można
kontrolować za pomocą promienia cienia, jeśli ustawisz cień promień do zera, wtedy zobaczysz, że masz
tylko cień, w którym zdefiniowałeś tutaj jego przesunięcie, dzięki czemu możesz upewnić się, że
cień naprawdę jest tylko tam, gdzie chcesz. Jeśli jednak ustawisz promień cienia i domyślnie istnieje
również domyślny promień cienia, uzyskasz ten efekt rozlania, który jest w końcu bardziej
naturalnym cieniem, więc tutaj jest to rzeczywiście efekt, którego chcę. Teraz dodałem cień zarówno na Androidzie, używając domyślnego
cienia Androida, jak i na iOS. Nawiasem mówiąc, na Androidzie możesz oczywiście
zmienić poziom elewacji, aby bawić się różnymi poziomami elewacji, dopóki nie uzyskasz pożądanego wyglądu
aplikacji, w zasadzie masz dość cienia. Teraz jednak oprócz tego cienia,
myślę, że byłoby miło mieć trochę wypełnienia w tym pudełku, ponieważ przedmioty leżą
zbyt blisko krawędzi, w końcu leżą bezpośrednio na krawędziach. Więc, aby to zmienić, dodam tutaj trochę wypełnienia, a będzie
to wypełnienie o wartości 20 i znowu, to jest wartość, z którą możesz eksperymentować, znajdź
wypełnienie, które osobiście preferujesz i uważasz, że wygląda dobrze, a jeśli próbujemy tego, teraz wygląda to znacznie lepiej.
Ponadto zaokrąglone rogi byłyby
miłe, więc dodam tutaj promień obramowania, powiedzmy 10, aby mieć lekko zaokrąglone krawędzie.
Jeśli teraz to zapiszemy, na obu platformach i na obu urządzeniach wygląda to całkiem słodko.
To jest teraz kontener wejściowy,
nie widzimy danych wejściowych i przyciski prawdopodobnie powinny mieć również ten sam
rozmiar, ale przynajmniej kontener wygląda teraz dobrze.