1
00:00:02,200 --> 00:00:04,720
Jest kilka rzeczy, w których

2
00:00:04,740 --> 00:00:08,950
moglibyśmy kontynuować, ale chcę kontynuować z kontenerem wejściowym, który jest kontenerem

3
00:00:08,980 --> 00:00:15,340
wokół tych danych wejściowych, więc wokół zaznaczenia tekstu liczbowego, wokół wprowadzania tekstu tutaj i wokół przycisków, a

4
00:00:15,340 --> 00:00:18,970
ten kontener ma szerokość i wyrównuje elementy, ale jak

5
00:00:18,970 --> 00:00:21,820
opisałem wcześniej, byłoby miło mieć tę kartę,

6
00:00:21,820 --> 00:00:27,410
aby tam szukać i potrzebujemy bardziej egzotycznych stylów, które brzmią naprawdę fantazyjnie, ale po

7
00:00:27,410 --> 00:00:30,450
prostu kilka zasad stylu, których wcześniej nie stosowaliśmy.

8
00:00:30,470 --> 00:00:34,080
Na przykład chcę dodać cień, delikatny cień

9
00:00:34,110 --> 00:00:43,310
i robisz to z czterema podstawowymi właściwościami, których możesz użyć. Kolor, przesunięcie, krycie i promień.

10
00:00:43,310 --> 00:00:46,760
Teraz kolor cienia powinien być wyraźny, to kolor twojego cienia.

11
00:00:46,760 --> 00:00:50,210
Przesunięcie cienia to przesunięcie względem kontenera, które faktycznie

12
00:00:50,210 --> 00:00:54,290
bierze obiekt, który następnie przyjmuje szerokość i wysokość, więc można powiedzieć,

13
00:00:54,290 --> 00:00:59,390
że chcę przesunąć cień o dwa piksele w odniesieniu do szerokości i dwa piksele

14
00:00:59,390 --> 00:01:07,220
w odniesieniu do wysokości , który wpływa na tworzony efekt trójwymiarowy. Krycie opisuje, jak przezroczysty jest ten cień, jeśli ustawisz

15
00:01:07,280 --> 00:01:08,990
krycie na 1,

16
00:01:08,990 --> 00:01:15,950
wtedy masz całkowicie przezroczysty, więc bardzo widoczny silny cień, a jeśli go zwiększysz lub zmniejszysz, powinienem

17
00:01:15,950 --> 00:01:21,800
powiedzieć, jeśli ustawisz go na 0. 1 na przykład

18
00:01:21,950 --> 00:01:28,910
masz cień, którego ledwo widać. Promień cienia opisuje w zasadzie, jak ostry jest

19
00:01:28,910 --> 00:01:35,290
ten cień, jeśli ma nierówne krawędzie lub jeśli jest nieco bardziej rozmazany, bardziej miękki, itp.

20
00:01:35,330 --> 00:01:40,610
Więc tutaj wybiorę cień w kolorze czarnym, przy okazji, możesz również użyć tutaj

21
00:01:40,610 --> 00:01:47,720
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ż

22
00:01:47,870 --> 00:01:53,270
z alfą kanał opisujący tutaj przezroczystość. Chociaż przezroczystość tutaj nie będzie miała bezpośredniego

23
00:01:53,270 --> 00:01:59,030
wpływu, dla cienia trzeba to ustawić z kryciem cienia. W przypadku innych kolorów miałoby to wpływ,

24
00:01:59,030 --> 00:02:04,100
ale to tylko dodatkowa uwaga. W załączeniu znajdziesz link ze szczegółowymi informacjami

25
00:02:04,100 --> 00:02:09,260
na temat konfigurowania kolorów i wartości kolorów, które React Native akceptuje, ponieważ oczywiście jest to o

26
00:02:09,260 --> 00:02:14,030
wiele bardziej wyczerpujące niż to, co mogę tutaj pokazać, po prostu pójdę z nazwą, ponieważ

27
00:02:14,030 --> 00:02:20,420
chcę czarny kolor, więc dlaczego nie skorzystać z tego skrótu? Teraz oprócz koloru tutaj cień również otrzyma

28
00:02:20,510 --> 00:02:23,990
przesunięcie i, jak powiedziałem, przesunięcie tutaj bierze obiekt.

29
00:02:23,990 --> 00:02:31,040
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

30
00:02:31,040 --> 00:02:36,530
cienia, zobaczysz wskazówkę, którą dostaję po prawej stronie, normalnie powinieneś to również otrzymać, ale

31
00:02:36,530 --> 00:02:42,830
na wypadek, gdybyś nie zdobądź to, oficjalne dokumenty są oczywiście miejscem, do którego należy się udać, zawsze

32
00:02:42,830 --> 00:02:49,100
pod przewodnikami, komponentami i interfejsami API, możesz kliknąć tam komponent widoku lub po prostu kliknąć dokumenty

33
00:02:49,100 --> 00:02:57,800
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

34
00:02:57,860 --> 00:03:03,890
stylów widoku i oczywiście także sposób ich konfiguracji, a tam na przykład dowiedziałeś się, że przesunięcie

35
00:03:03,890 --> 00:03:10,040
cienia jest obiektem z liczbą i wysokość. Jeśli chodzi o kolor, nauczyłeś się, że to

36
00:03:10,040 --> 00:03:14,630
przyjmuje kolor i to jest dokładnie link, który znajdziesz tutaj, w którym opisano,

37
00:03:14,630 --> 00:03:16,740
jakiego rodzaju kolorów możesz użyć.

38
00:03:17,030 --> 00:03:24,020
Więc to tylko mała uwaga, tutaj użyję przesunięcia cienia o szerokości zero, ale wysokości 2,

39
00:03:24,020 --> 00:03:32,030
aby mój cień był przesunięty nieco w dół, żeby powiedzieć, że nie tak bardzo w prawo, więc wcale

40
00:03:32,030 --> 00:03:40,310
nie po prawej stronie, a następnie dodam promień cienia, który jest liczbą, dajmy szóstce szansę i zobaczmy, co to

41
00:03:40,310 --> 00:03:41,870
robi, i wreszcie,

42
00:03:42,650 --> 00:03:49,970
ale nie mniej ważne, nieprzezroczystość cienia równą 0. 26, który jest względnie przejrzysty, ale wydaje mi się,

43
00:03:49,970 --> 00:03:51,610
że wygląda całkiem ładnie.

44
00:03:51,850 --> 00:03:58,480
Ponadto dam pojemnikowi wejściowemu kolor tła biały, aby upewnić się, że jest zawsze biały i

45
00:03:58,480 --> 00:04:03,370
nieprzezroczysty, co w innym przypadku jest domyślnym, więc jeśli chcielibyśmy mieć

46
00:04:03,370 --> 00:04:08,890
inny kolor tła za kontenerem, powiedzmy jako podstawowy kolor cały ekran, pojemnik tutaj

47
00:04:08,920 --> 00:04:11,100
zawsze miałby białe tło.

48
00:04:11,140 --> 00:04:16,180
Teraz, jeśli to zapiszesz, powinieneś zobaczyć cień, który wygląda mniej więcej tak

49
00:04:16,180 --> 00:04:20,190
na iOS, ale nie widzisz cienia w ogóle na Androidzie

50
00:04:20,410 --> 00:04:28,120
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

51
00:04:28,120 --> 00:04:32,820
więc ustawić cień na Androidzie? Czy to nie jest możliwe?

52
00:04:33,070 --> 00:04:39,610
Jest tam, ale masz specjalny rekwizyt w stylu, rekwizyt wysokościowy. Działa to tylko na Androidzie, podobnie jak

53
00:04:39,610 --> 00:04:48,280
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

54
00:04:48,280 --> 00:04:55,090
korzysta z domyślnej elewacji projektu materiału na Androida, więc masz tam mniej kontroli, ale z

55
00:04:55,090 --> 00:05:00,130
drugiej strony otrzymujesz domyślny wygląd projektu materiału, do którego użytkownicy mogą

56
00:05:00,130 --> 00:05:06,070
być przyzwyczajeni, więc to jest dobrą rzeczą w tym, a teraz mamy

57
00:05:06,340 --> 00:05:13,590
też cień na Androida i iOS. Na iOS zauważysz również, że cień jest widoczny również po

58
00:05:13,590 --> 00:05:19,840
lewej i prawej stronie pudełka, mimo że podałem to przesunięcie cienia o 0 dla szerokości, którą można

59
00:05:19,840 --> 00:05:25,480
kontrolować za pomocą promienia cienia, jeśli ustawisz cień promień do zera, wtedy zobaczysz, że masz

60
00:05:25,480 --> 00:05:30,970
tylko cień, w którym zdefiniowałeś tutaj jego przesunięcie, dzięki czemu możesz upewnić się, że

61
00:05:30,970 --> 00:05:37,060
cień naprawdę jest tylko tam, gdzie chcesz. Jeśli jednak ustawisz promień cienia i domyślnie istnieje

62
00:05:37,060 --> 00:05:41,350
również domyślny promień cienia, uzyskasz ten efekt rozlania, który jest w końcu bardziej

63
00:05:41,350 --> 00:05:47,860
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

64
00:05:47,920 --> 00:05:53,500
cienia Androida, jak i na iOS. Nawiasem mówiąc, na Androidzie możesz oczywiście

65
00:05:53,500 --> 00:05:59,950
zmienić poziom elewacji, aby bawić się różnymi poziomami elewacji, dopóki nie uzyskasz pożądanego wyglądu

66
00:05:59,950 --> 00:06:05,530
aplikacji, w zasadzie masz dość cienia. Teraz jednak oprócz tego cienia,

67
00:06:05,530 --> 00:06:11,680
myślę, że byłoby miło mieć trochę wypełnienia w tym pudełku, ponieważ przedmioty leżą

68
00:06:11,680 --> 00:06:20,350
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

69
00:06:20,350 --> 00:06:26,440
to wypełnienie o wartości 20 i znowu, to jest wartość, z którą możesz eksperymentować, znajdź

70
00:06:26,440 --> 00:06:33,910
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.

71
00:06:33,970 --> 00:06:36,700
Ponadto zaokrąglone rogi byłyby

72
00:06:37,120 --> 00:06:45,870
miłe, więc dodam tutaj promień obramowania, powiedzmy 10, aby mieć lekko zaokrąglone krawędzie.

73
00:06:45,870 --> 00:06:52,940
Jeśli teraz to zapiszemy, na obu platformach i na obu urządzeniach wygląda to całkiem słodko.

74
00:06:52,940 --> 00:06:54,740
To jest teraz kontener wejściowy,

75
00:06:54,770 --> 00:06:58,570
nie widzimy danych wejściowych i przyciski prawdopodobnie powinny mieć również ten sam

76
00:06:58,820 --> 00:07:00,950
rozmiar, ale przynajmniej kontener wygląda teraz dobrze.