1
00:00:02,350 --> 00:00:09,690
Tak więc, zacznijmy od naszej aplikacji tutaj i oczywiście są różne sposoby rozpoczęcia, chcę

2
00:00:09,700 --> 00:00:10,520
zacząć

3
00:00:10,690 --> 00:00:19,420
od upuszczenia tego stylu kontenera tutaj na ekranie startowym, a zamiast tego chcę pozbyć się tekst i

4
00:00:19,960 --> 00:00:25,060
wszystko tutaj i chcę zacząć od dodania własnego nagłówka, więc

5
00:00:25,060 --> 00:00:27,790
ten pasek u góry ekranu.

6
00:00:28,150 --> 00:00:34,360
Teraz możemy samodzielnie zbudować taki pasek, pozwól mi pozbyć się tego importu, którego nie

7
00:00:34,360 --> 00:00:39,880
potrzebujemy, i zbuduję go nie w tym komponencie aplikacji, ale w osobnym pliku

8
00:00:39,880 --> 00:00:46,630
komponentu, w osobnym komponencie niestandardowym, ponieważ i to już jedna bardzo ważna rzecz do zabrania, tak

9
00:00:46,630 --> 00:00:47,630
jak w

10
00:00:47,680 --> 00:00:55,360
React dla aplikacji internetowych, dobrą praktyką jest dzielenie aplikacji na wiele składników, które następnie komponujesz razem, ponieważ prowadzi

11
00:00:55,360 --> 00:00:59,540
to do łatwiejszego do zarządzania i wielokrotnego użytku kodu.

12
00:00:59,540 --> 00:01:04,660
Dodam więc nowy folder, komponenty, ale nazwa zależy od ciebie, możesz nazwać ten folder, jak

13
00:01:04,910 --> 00:01:09,360
chcesz i tam chcę mieć nagłówek. plik js do przechowywania komponentu nagłówka.

14
00:01:09,490 --> 00:01:14,490
Tam musimy zaimportować React z React, abyśmy mogli tam użyć React i

15
00:01:14,500 --> 00:01:23,300
napisać kod jsx, a następnie będziemy potrzebować również niektórych składników z React Native, ponieważ nigdy nie można zapominać, że są

16
00:01:23,300 --> 00:01:27,650
to jedyne podstawowe komponenty, których można użyć w koniec.

17
00:01:27,650 --> 00:01:31,310
Nie możesz używać żadnych internetowych elementów HTML ani niczego podobnego,

18
00:01:31,310 --> 00:01:34,720
potrzebujesz tych podstawowych prymitywów, które daje ci React Native.

19
00:01:34,850 --> 00:01:40,290
Na pewno potrzebujemy tutaj widoku, a także komponentu tekstowego, a także komponentu arkusza stylów, a

20
00:01:40,520 --> 00:01:43,420
teraz dzięki temu możemy zacząć budować nagłówek.

21
00:01:43,550 --> 00:01:51,890
W tym celu dodam stałą nagłówka, która przechowuje mój funkcjonalny komponent, ponieważ będę pracować z funkcjonalnymi komponentami tylko

22
00:01:51,890 --> 00:01:58,560
w tym kursie, użyjemy haków w miejscach, w których musimy zarządzać stanem lub efektami

23
00:01:58,620 --> 00:02:06,170
ubocznymi, a tutaj będziemy oczywiście wyeksportuj ten komponent na końcu, a także skonfiguruj obiekt stylów za

24
00:02:06,170 --> 00:02:10,460
pomocą arkusza stylów, abyśmy mogli stylizować to na końcu.

25
00:02:10,520 --> 00:02:13,020
Teraz stwórzmy tutaj nasz komponent, zwróćmy coś

26
00:02:13,040 --> 00:02:14,580
tutaj, a to, co chcę

27
00:02:14,750 --> 00:02:19,120
zwrócić, to w końcu widok z tekstem w środku, a tekst powinien być

28
00:02:19,120 --> 00:02:20,190
naszym tytułem.

29
00:02:20,300 --> 00:02:26,780
Dlatego między tagiem otwierającym i zamykającym wyślę tytuł rekwizytów, aby nasz własny komponent mógł

30
00:02:26,780 --> 00:02:34,010
otrzymać rekwizyt tytułu i wyprowadzić go tutaj. Widok otaczający tekst zostanie użyty do pozycjonowania tekstu

31
00:02:34,010 --> 00:02:40,790
i nadania mu nieco stylizacji, więc do stylizowania naszego nagłówka, ponieważ elementy tekstu same w sobie są

32
00:02:40,880 --> 00:02:47,960
również stylowe, ale nie w takim samym stopniu jak widoki, widoki naprawdę są trochę bardziej elastyczny w

33
00:02:47,960 --> 00:02:53,090
odniesieniu do stylów, które można przypisać oraz w odniesieniu do ich zachowania,

34
00:02:53,120 --> 00:02:59,600
dlatego zawsze chcesz użyć widoku dla takiego otaczającego kontenera i dla tej ogólnej stylizacji, jaką może

35
00:02:59,600 --> 00:03:02,380
mieć Twój komponent lub jego części.

36
00:03:02,390 --> 00:03:08,810
Więc tutaj dodam rekwizyt stylu i przypiszę styl dla mojego obiektu stylów, stylu, którego jeszcze tam nie stworzyliśmy, ale

37
00:03:08,810 --> 00:03:16,810
nadam mu nazwę nagłówka, a także nadam tekstowi rekwizyt stylu i wskażę na tytuł nagłówka stylów lub cokolwiek, jak chcesz go nazwać, ponieważ,

38
00:03:16,820 --> 00:03:21,500
jak powiedziałem, możesz również stylizować tekst, a tutaj chcę mieć później style specyficzne

39
00:03:21,500 --> 00:03:28,360
dla tekstu, aby upewnić się, że tekst wygląda dobrze. Więc teraz tutaj w arkuszu stylów, możemy zacząć

40
00:03:28,450 --> 00:03:35,170
stylizować nasz nagłówek, a ja zacznę od samego nagłówka, dodając prop nagłówka, a następnie ten obiekt będzie

41
00:03:35,170 --> 00:03:40,810
przechowywał te definicje stylu dla nagłówka, więc dla tego komponentu widoku tu i tam

42
00:03:40,810 --> 00:03:46,960
oczywiście możesz eksperymentować z czymkolwiek chcesz. Pójdę z szerokością 100%, aby zajęła

43
00:03:47,080 --> 00:03:53,470
pełną szerokość urządzenia, którą możemy uzyskać lub pełną szerokość komponentu nadrzędnego, a dokładniej, ale dodam

44
00:03:53,470 --> 00:03:58,810
go tak, aby komponent nadrzędny zajął pełną szerokość urządzenia, a zatem , zajmie

45
00:03:58,840 --> 00:04:05,040
to również pełną szerokość urządzenia na końcu. Podaj wysokość i tam możesz eksperymentować z

46
00:04:05,040 --> 00:04:10,020
różnymi wartościami. Znalazłem 90, aby wyglądać całkiem przyzwoicie i dlatego pójdę z tym.

47
00:04:10,020 --> 00:04:16,500
Na marginesie, na razie zoptymalizuję te ekrany, które mam tutaj, w następnym module kursu

48
00:04:16,500 --> 00:04:23,610
zajmiemy się tym, jak możesz dostosować swoje widoki i kod dla różnych urządzeń, zarówno pod względem

49
00:04:23,610 --> 00:04:30,690
wielkości, jak i platformy Twój kod działa. Na razie nie będziemy się tutaj różnicować, dostosujemy

50
00:04:30,690 --> 00:04:37,640
również w naszej aplikacji, aby dobrze wyglądać na tych dwóch emulatorach, ale ponownie zajmę się tym później.

51
00:04:37,830 --> 00:04:45,900
Więc wysokość 90, dopełnienie do góry 36, aby mieć trochę odstępów od góry i muszę

52
00:04:45,900 --> 00:04:53,130
to dodać, aby w zasadzie poradzić sobie lub rzeczy takie jak pasek stanu

53
00:04:53,160 --> 00:05:00,200
tutaj lub ten wycięcie tutaj, więc dlatego dodaję tę wyściółkę i chcę również

54
00:05:00,360 --> 00:05:04,760
aby dodać tutaj kolor tła, a teraz

55
00:05:04,770 --> 00:05:13,350
możesz oczywiście wybrać dowolny kolor, przygotowałem ładny kolor, kod szesnastkowy koloru, który osobiście lubię i to

56
00:05:13,380 --> 00:05:21,450
jest # f7287b, który jest całkiem niezłym kolorem w moim opinia, jak zobaczysz za sekundę.

57
00:05:21,460 --> 00:05:27,250
Teraz chcę również wyśrodkować tytuł, dlatego użyję wyrównywania elementów i justifyContent, ponieważ każdy

58
00:05:27,340 --> 00:05:33,280
widok domyślnie używa flexboksa, a zatem w przypadku wyrównywania elementów i justifyContent możemy

59
00:05:33,280 --> 00:05:39,610
kontrolować, w jaki sposób elementy potomne widoku są umieszczane wewnątrz widoku a ze środkiem do

60
00:05:39,640 --> 00:05:40,780
wyrównywania elementów

61
00:05:40,780 --> 00:05:48,010
i justifyContent również ustawionym na środek, centrujemy wszystkie elementy podrzędne lub środkowe wewnątrz widoku na środku, zarówno

62
00:05:48,010 --> 00:05:50,680
w poziomie, jak i w pionie.

63
00:05:50,680 --> 00:05:52,480
Teraz w tytule

64
00:05:52,480 --> 00:05:55,640
nagłówka chcę też ustawić dla tego kilka stylów.

65
00:05:55,780 --> 00:06:05,230
Tak więc tytuł nagłówka powinien mieć kolor czarny, ponieważ będzie pasował do tego koloru tutaj, abyśmy mogli odczytać

66
00:06:05,260 --> 00:06:11,020
tekst i chcę ustawić rozmiar czcionki na 18, powiedzmy, abyśmy to

67
00:06:11,050 --> 00:06:18,500
trochę poprawili większy rozmiar czcionki tutaj. Dzięki temu spróbujmy użyć tego nagłówka i

68
00:06:18,620 --> 00:06:26,550
użyjmy go w aplikacji. plik js tutaj. Tam mamy ten widok

69
00:06:26,560 --> 00:06:31,070
i ten widok nie ma dołączonego stylu.

70
00:06:31,150 --> 00:06:38,050
Zmienię to i skonfiguruję tutaj widok ekranu i nadam temu flex jednego atrybutu.

71
00:06:38,050 --> 00:06:44,090
Teraz możemy to tutaj przypisać, a Flex One zapewni, że ten widok zajmie całą dostępną

72
00:06:44,140 --> 00:06:49,780
przestrzeń, a ponieważ jest to widok główny naszej aplikacji, oznacza to, że zajmie

73
00:06:49,780 --> 00:06:56,770
całą szerokość i wysokość, jaką może uzyskać, zajmie pełne i dlatego, ponieważ mój nagłówek zajmuje szerokość 100%, ponieważ

74
00:06:56,770 --> 00:07:03,730
dodam go bezpośrednio do tego widoku, który jest teraz skonfigurowany do przyjmowania pełnej szerokości i wysokości, ten

75
00:07:03,730 --> 00:07:06,360
nagłówek będzie również przyjmował pełną szerokość.

76
00:07:06,370 --> 00:07:08,440
Więc teraz musimy oczywiście dodać tutaj

77
00:07:08,440 --> 00:07:12,480
nagłówek, więc zaimportuj nagłówek z. / components / header,

78
00:07:12,580 --> 00:07:20,020
możesz pominąć rozszerzenie pliku, a następnie po prostu dodać nagłówek jako tag samozamykający się tutaj, ale nie zapomnij

79
00:07:20,020 --> 00:07:25,120
ustawić prop tytułu, ponieważ pamiętaj, że propozycję tytułu wyświetlamy między tagami tekstowymi,

80
00:07:25,570 --> 00:07:33,120
więc mogę tu dodać tytuł, a ja go wymyślę, zgadnij liczbę, bo o to właśnie chodzi w naszej grze.

81
00:07:33,120 --> 00:07:39,210
Teraz, jeśli zapiszemy to, powinno ono automatycznie odbudować i powinieneś zobaczyć nagłówek, który wygląda tak na iPhonie i tak tutaj na

82
00:07:39,240 --> 00:07:45,900
Androidzie, i powiedziałbym, że jest w porządku dla obu urządzeń. Ponownie zbadamy później sposoby

83
00:07:46,290 --> 00:07:52,320
dostosowania wyglądu do konkretnego urządzenia, na którym działa Twoja aplikacja.