1
00:00:02,410 --> 00:00:07,890
Wracając do kodu, zaczęliśmy od rzucania tutaj niektórych widoków i oczywiście teraz, to nie zadziała, to po prostu się zepsuje

2
00:00:07,900 --> 00:00:13,930
lub nie sprawi, że coś będzie miało znaczenie dla ekranu. W tym pierwszym zagnieżdżonym widoku tutaj,

3
00:00:13,930 --> 00:00:14,920
w

4
00:00:14,920 --> 00:00:21,330
tym bloku, poszedłem wprowadzić tekst i przycisk. Dogodnie, oba są dostarczane przez React Native,

5
00:00:21,330 --> 00:00:27,390
mamy tutaj tekst, a także przycisk. Możemy więc zaimportować zarówno tekst, który pozwala

6
00:00:27,390 --> 00:00:33,510
użytkownikowi wprowadzić tekst i przycisk, a następnie w tym widoku, w tym pierwszym zagnieżdżonym widoku

7
00:00:33,510 --> 00:00:40,890
dodam tekst jako tag samozamykający się, ponieważ nie możemy nic przekazać między otwieraniem i zamykanie tagów, a dla

8
00:00:40,890 --> 00:00:42,440
przycisku możesz pomyśleć,

9
00:00:42,450 --> 00:00:47,430
że używasz takiego przycisku, ale tak naprawdę nie działa ten przycisk React Native,

10
00:00:47,430 --> 00:00:47,960
zamiast

11
00:00:47,970 --> 00:00:53,620
tego jest to przycisk samozamykający się i ustawiasz właściwość title, aby zdefiniować tekst, który

12
00:00:53,840 --> 00:01:00,150
ma być renderowany, i tutaj możemy powiedzieć dodać. Teraz mamy tam wprowadzanie tekstu i przycisk,

13
00:01:00,360 --> 00:01:08,230
a jeśli zapiszemy to i to się ponownie ładuje, widzimy tutaj przycisk, ale nie widzimy wprowadzania tekstu, prawda?

14
00:01:08,490 --> 00:01:11,070
To nie działa zgodnie z przeznaczeniem.

15
00:01:11,070 --> 00:01:16,850
Powodem tego jest fakt, że wprowadzanie tekstu zostanie ukryte tutaj poniżej paska stanu.

16
00:01:16,920 --> 00:01:22,740
Więc teraz jest czas, kiedy powinniśmy zacząć od dodania jakiegoś układu, jakiejś struktury

17
00:01:22,770 --> 00:01:25,410
do tej strony, ponieważ samo

18
00:01:25,410 --> 00:01:30,990
dodanie składników nie załatwi sprawy, aplikacja React Native polega na użyciu składników,

19
00:01:31,080 --> 00:01:40,190
a następnie dodaniu odpowiedniego układu, właściwego struktura twoich komponentów. Na przykład tutaj sensowne byłoby dodanie ogólnej dopełnienia wokół tego widoku, więc

20
00:01:40,190 --> 00:01:46,310
w tym widoku z góry, więc dopełnienie jest w pewnej odległości od granicy tego widoku, która

21
00:01:46,760 --> 00:01:48,870
w naszym przypadku jest zasadniczo

22
00:01:48,920 --> 00:01:54,890
ramką urządzenia, ponieważ jestem mówiąc o najwyższym widoku do zawartości widoku, więc pewne odstępy między

23
00:01:54,980 --> 00:02:00,650
granicami najwyższego widoku, otaczającego widoku i treści w widoku, i do tego możemy dodać właściwość

24
00:02:00,650 --> 00:02:02,660
stylu tutaj w widoku.

25
00:02:02,660 --> 00:02:09,530
Większość komponentów w React Native obsługuje właściwość style, widok tam i tam, używasz tego dynamicznego wiązania

26
00:02:10,070 --> 00:02:15,800
treści tutaj, które znasz z normalnego React również z pojedynczymi nawiasami klamrowymi

27
00:02:15,800 --> 00:02:21,590
i styl oczekuje teraz obiektu JavaScript. Więc dodajemy tutaj kolejną parę nawiasów klamrowych, a

28
00:02:21,590 --> 00:02:25,530
teraz powszechnym błędem jest to, że uważasz, że jest to specjalna składnia,

29
00:02:25,670 --> 00:02:31,390
która wymaga podwójnych nawiasów klamrowych, w rzeczywistości jest to normalna składnia React z podobnie nawiasami klamrowymi, w

30
00:02:31,400 --> 00:02:34,640
których następnie wartość dynamiczną przekazujesz do stylu akurat jest obiektem

31
00:02:34,640 --> 00:02:40,310
JavaScript, dlatego mamy kolejną parę nawiasów klamrowych. W tym obiekcie możesz teraz

32
00:02:40,310 --> 00:02:46,610
mieć pary klucz-wartość, w których kluczami są nazwy właściwości stylu, a wartości są wartościami właściwości

33
00:02:47,420 --> 00:02:51,740
stylu, a na te nazwy właściwości stylu ma wpływ CSS.

34
00:02:51,770 --> 00:02:58,250
Więc tutaj możesz dodać dopełnienie, które istnieje również w React Native, a pełną listę

35
00:02:58,250 --> 00:03:04,130
obsługiwanych właściwości stylu można zawsze znaleźć, przechodząc do używanego komponentu, na

36
00:03:04,130 --> 00:03:10,850
przykład widok tutaj, a następnie klikając we właściwości stylu i tutaj, jeśli klikniesz style widoku,

37
00:03:10,850 --> 00:03:17,750
zobaczysz listę wszystkich dostępnych właściwości, których możesz użyć, i zobaczysz tutaj niektóre specjalne właściwości widoku,

38
00:03:17,750 --> 00:03:24,410
a następnie niektóre ogólne rekwizyty, takie jak rekwizyty układu i tam, znajdziesz na przykład wyściółkę.

39
00:03:24,480 --> 00:03:30,640
W ten sposób możesz dowiedzieć się, co jest obsługiwane, ale zobaczysz również wiele przykładów na tym kursie.

40
00:03:30,650 --> 00:03:36,080
Dodam tutaj dopełnienie, a wartością może być teraz liczba, która będzie pikselami niezależnymi od urządzenia,

41
00:03:36,290 --> 00:03:41,300
więc wartość piksela, która zawsze wygląda dobrze, bez względu na rozmiar urządzenia.

42
00:03:41,330 --> 00:03:46,990
Więc tutaj możemy dodać 10, a jeśli to zrobimy, teraz widzimy, że przycisk jest nieco niższy,

43
00:03:47,050 --> 00:03:51,860
może dodajmy tutaj 30, aby zobaczyć większą różnicę, a teraz działa, a teraz,

44
00:03:52,090 --> 00:03:56,050
jeśli stukniesz nad przyciskiem, tak naprawdę nie widzisz tutaj danych wejściowych,

45
00:03:56,050 --> 00:04:01,230
ale widzisz, że moja miękka klawiatura otworzyła się na Androidzie, na iOS nie otwiera

46
00:04:01,240 --> 00:04:03,790
się domyślnie, ale tam też możesz stuknąć

47
00:04:03,970 --> 00:04:11,410
tutaj i jeśli miałbyś stukać wystarczająco często lub jeśli idziesz do sprzęt, ta klawiatura przełącza klawiaturę programową, powinna się tam

48
00:04:11,410 --> 00:04:13,780
również otworzyć, więc tutaj też mamy

49
00:04:13,780 --> 00:04:15,180
dane wejściowe.

50
00:04:15,190 --> 00:04:19,840
Teraz możemy zobaczyć to wejście, ponieważ teraz nie jest już za tym paskiem stanu.

51
00:04:19,840 --> 00:04:27,040
Dodanie tego wypełnienia prawdopodobnie miało sens, ponieważ teraz upewniliśmy się, że nasz układ znajduje się

52
00:04:27,040 --> 00:04:28,660
tutaj na ekranie.

53
00:04:28,660 --> 00:04:31,980
Teraz istnieją inne narzędzia do upewnienia się, że mamy tutaj

54
00:04:32,170 --> 00:04:36,460
wystarczającą ilość wypełnienia, ale na razie ręcznie ustawmy wypełnienie i może ustawimy wartość 30.

55
00:04:36,880 --> 00:04:39,760
Więc zaczynaliśmy od układu, teraz wróćmy

56
00:04:39,760 --> 00:04:43,650
do tego komponentu i upewnijmy się, że możemy coś zobaczyć,

57
00:04:43,660 --> 00:04:48,120
możemy zobaczyć, że jest wprowadzanie tekstu i nie musimy tylko zgadywać.

58
00:04:48,550 --> 00:04:54,070
W tym celu możemy przejść do wprowadzania tekstu i tam na przykład dodać symbol zastępczy i

59
00:04:54,070 --> 00:04:55,800
tak jak wcześniej, aby dowiedzieć

60
00:04:55,810 --> 00:05:02,990
się, co możesz ustawić, zawsze możesz przejść do oficjalnych dokumentów, w tym przypadku do dokumentów wprowadzania tekstu i tam, znajdziesz opis,

61
00:05:03,000 --> 00:05:04,930
jak go używać i kilka przykładów,

62
00:05:05,070 --> 00:05:10,770
ale jeśli przewiniesz w dół, znajdziesz również wszystkie rekwizyty, które możesz ustawić, a tam na przykład odkryjesz,

63
00:05:11,130 --> 00:05:16,410
że możesz ustawić zastępczą rekwizyt, czyli ten fikcyjny tekst, który jest wyświetlany, zanim użytkownik wprowadzi

64
00:05:16,410 --> 00:05:17,640
jakiś tekst.

65
00:05:17,640 --> 00:05:23,580
Więc tutaj, to wymaga ciągu i tutaj możemy wprowadzić cel kursu, ponieważ powinieneś być w stanie

66
00:05:23,580 --> 00:05:24,940
ustawić swój cel

67
00:05:25,040 --> 00:05:28,970
kursu tutaj, a jeśli to zrobisz, zobaczysz zarówno na Androidzie, jak

68
00:05:28,980 --> 00:05:31,510
i na iOS, ten tekst celu kursu.

69
00:05:31,510 --> 00:05:33,590
Teraz może być nieco lepiej,

70
00:05:33,600 --> 00:05:39,180
może być nieco jaśniej, że wprowadzanie tekstu jest możliwe, dlatego tutaj dodam styl,

71
00:05:39,210 --> 00:05:40,170
inny

72
00:05:40,170 --> 00:05:48,170
styl wbudowany i tutaj ustawię teraz kolor dolnej czerni, czerni jest ciągiem, takie skróty kolorów są obsługiwane w React

73
00:05:48,180 --> 00:05:53,940
Native, a do tego wykładu dołączona jest wyczerpująca lista wszystkich dostępnych kolorów, a

74
00:05:54,870 --> 00:06:01,860
także widzę, że szerokość dolnej granicy powiedzmy 1 i to, co to robi, powinno ustawić dolne obramowanie

75
00:06:01,860 --> 00:06:07,770
tego wejścia, więc jeśli teraz wrócimy, mamy to podkreślenie, możemy wyraźnie to zobaczyć na

76
00:06:07,770 --> 00:06:13,710
iOS, a ponieważ wciąż nie ma tak dużo miejsca na iOS, pozwól mi teraz

77
00:06:13,710 --> 00:06:17,520
zwiększyć to dopełnienie do 50, tak, wygląda to lepiej.

78
00:06:17,540 --> 00:06:22,630
Więc teraz mamy tę granicę poniżej naszych danych wejściowych, co wyjaśnia, że tutaj jest dane wejściowe.

79
00:06:22,810 --> 00:06:26,380
Oczywiście nie jesteś ograniczony do ustawiania tylko granicy na

80
00:06:26,380 --> 00:06:28,640
dole, możesz także ustawić ogólną

81
00:06:28,660 --> 00:06:32,140
granicę, pozostawiając tutaj dół, kolor ramki i szerokość

82
00:06:32,530 --> 00:06:36,180
ramki, a jeśli to zrobisz, to będzie otoczony granica.

83
00:06:36,190 --> 00:06:42,250
Teraz jedna ważna uwaga dotycząca tych nazw stylów, nazw właściwości stylów, oczywiście widzisz, że

84
00:06:42,250 --> 00:06:49,390
jest to szerokość ramki, kolor ramki napisany w ten sposób, w normalnym CSS, miałbyś kolor ramki i

85
00:06:49,750 --> 00:06:55,870
to zastosowałoby kolor ramki, ale to by być niepoprawną nazwą właściwości w Javascript, dlatego nie

86
00:06:55,870 --> 00:06:57,670
jest to obsługiwane.

87
00:06:57,670 --> 00:07:03,280
Właściwie, prawidłowa nazwa właściwości w Javascripcie byłaby, gdybyś zawinął to w cudzysłów, ale nawet

88
00:07:03,520 --> 00:07:10,240
to nie jest obsługiwane w React Native, więc te alternatywne składnie, na przykład ta składnia działałyby w

89
00:07:10,240 --> 00:07:18,010
JavaScript, jeśli zastosujesz jakiś styl do elementu HTML HTML , te składnie nie są obsługiwane w React Native, tam naprawdę

90
00:07:18,010 --> 00:07:23,320
musisz użyć tej składni wielbłąda, gdzie na przykład piszesz taki kolor obramowania

91
00:07:23,320 --> 00:07:29,740
lub w skrócie, musisz użyć nazw właściwości, które znajdziesz również w oficjalnych dokumentach, tam nie są

92
00:07:29,740 --> 00:07:37,030
alternatywnymi nazwami dla tych właściwości stylu i moglibyśmy teraz dodać tutaj dopełnienie, powiedzmy 10, abyśmy mieli trochę odstępu między

93
00:07:37,600 --> 00:07:43,570
ramką a rzeczywistą częścią, w której coś wchodzimy, i powiedziałbym, że to już wygląda o

94
00:07:43,720 --> 00:07:49,540
wiele lepiej, a my widzimy wyraźnie, że tutaj mamy dane wejściowe, w których użytkownicy mogą

95
00:07:49,540 --> 00:07:50,530
coś wpisać.