Tak więc, zacznijmy od naszej aplikacji tutaj i oczywiście są różne sposoby rozpoczęcia, chcę
zacząć
od upuszczenia tego stylu kontenera tutaj na ekranie startowym, a zamiast tego chcę pozbyć się tekst i
wszystko tutaj i chcę zacząć od dodania własnego nagłówka, więc
ten pasek u góry ekranu.
Teraz możemy samodzielnie zbudować taki pasek, pozwól mi pozbyć się tego importu, którego nie
potrzebujemy, i zbuduję go nie w tym komponencie aplikacji, ale w osobnym pliku
komponentu, w osobnym komponencie niestandardowym, ponieważ i to już jedna bardzo ważna rzecz do zabrania, tak
jak w
React dla aplikacji internetowych, dobrą praktyką jest dzielenie aplikacji na wiele składników, które następnie komponujesz razem, ponieważ prowadzi
to do łatwiejszego do zarządzania i wielokrotnego użytku kodu.
Dodam więc nowy folder, komponenty, ale nazwa zależy od ciebie, możesz nazwać ten folder, jak
chcesz i tam chcę mieć nagłówek. plik js do przechowywania komponentu nagłówka.
Tam musimy zaimportować React z React, abyśmy mogli tam użyć React i
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ą
to jedyne podstawowe komponenty, których można użyć w koniec.
Nie możesz używać żadnych internetowych elementów HTML ani niczego podobnego,
potrzebujesz tych podstawowych prymitywów, które daje ci React Native.
Na pewno potrzebujemy tutaj widoku, a także komponentu tekstowego, a także komponentu arkusza stylów, a
teraz dzięki temu możemy zacząć budować nagłówek.
W tym celu dodam stałą nagłówka, która przechowuje mój funkcjonalny komponent, ponieważ będę pracować z funkcjonalnymi komponentami tylko
w tym kursie, użyjemy haków w miejscach, w których musimy zarządzać stanem lub efektami
ubocznymi, a tutaj będziemy oczywiście wyeksportuj ten komponent na końcu, a także skonfiguruj obiekt stylów za
pomocą arkusza stylów, abyśmy mogli stylizować to na końcu.
Teraz stwórzmy tutaj nasz komponent, zwróćmy coś
tutaj, a to, co chcę
zwrócić, to w końcu widok z tekstem w środku, a tekst powinien być
naszym tytułem.
Dlatego między tagiem otwierającym i zamykającym wyślę tytuł rekwizytów, aby nasz własny komponent mógł
otrzymać rekwizyt tytułu i wyprowadzić go tutaj. Widok otaczający tekst zostanie użyty do pozycjonowania tekstu
i nadania mu nieco stylizacji, więc do stylizowania naszego nagłówka, ponieważ elementy tekstu same w sobie są
również stylowe, ale nie w takim samym stopniu jak widoki, widoki naprawdę są trochę bardziej elastyczny w
odniesieniu do stylów, które można przypisać oraz w odniesieniu do ich zachowania,
dlatego zawsze chcesz użyć widoku dla takiego otaczającego kontenera i dla tej ogólnej stylizacji, jaką może
mieć Twój komponent lub jego części.
Więc tutaj dodam rekwizyt stylu i przypiszę styl dla mojego obiektu stylów, stylu, którego jeszcze tam nie stworzyliśmy, ale
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ż,
jak powiedziałem, możesz również stylizować tekst, a tutaj chcę mieć później style specyficzne
dla tekstu, aby upewnić się, że tekst wygląda dobrze. Więc teraz tutaj w arkuszu stylów, możemy zacząć
stylizować nasz nagłówek, a ja zacznę od samego nagłówka, dodając prop nagłówka, a następnie ten obiekt będzie
przechowywał te definicje stylu dla nagłówka, więc dla tego komponentu widoku tu i tam
oczywiście możesz eksperymentować z czymkolwiek chcesz. Pójdę z szerokością 100%, aby zajęła
pełną szerokość urządzenia, którą możemy uzyskać lub pełną szerokość komponentu nadrzędnego, a dokładniej, ale dodam
go tak, aby komponent nadrzędny zajął pełną szerokość urządzenia, a zatem , zajmie
to również pełną szerokość urządzenia na końcu. Podaj wysokość i tam możesz eksperymentować z
różnymi wartościami. Znalazłem 90, aby wyglądać całkiem przyzwoicie i dlatego pójdę z tym.
Na marginesie, na razie zoptymalizuję te ekrany, które mam tutaj, w następnym module kursu
zajmiemy się tym, jak możesz dostosować swoje widoki i kod dla różnych urządzeń, zarówno pod względem
wielkości, jak i platformy Twój kod działa. Na razie nie będziemy się tutaj różnicować, dostosujemy
również w naszej aplikacji, aby dobrze wyglądać na tych dwóch emulatorach, ale ponownie zajmę się tym później.
Więc wysokość 90, dopełnienie do góry 36, aby mieć trochę odstępów od góry i muszę
to dodać, aby w zasadzie poradzić sobie lub rzeczy takie jak pasek stanu
tutaj lub ten wycięcie tutaj, więc dlatego dodaję tę wyściółkę i chcę również
aby dodać tutaj kolor tła, a teraz
możesz oczywiście wybrać dowolny kolor, przygotowałem ładny kolor, kod szesnastkowy koloru, który osobiście lubię i to
jest # f7287b, który jest całkiem niezłym kolorem w moim opinia, jak zobaczysz za sekundę.
Teraz chcę również wyśrodkować tytuł, dlatego użyję wyrównywania elementów i justifyContent, ponieważ każdy
widok domyślnie używa flexboksa, a zatem w przypadku wyrównywania elementów i justifyContent możemy
kontrolować, w jaki sposób elementy potomne widoku są umieszczane wewnątrz widoku a ze środkiem do
wyrównywania elementów
i justifyContent również ustawionym na środek, centrujemy wszystkie elementy podrzędne lub środkowe wewnątrz widoku na środku, zarówno
w poziomie, jak i w pionie.
Teraz w tytule
nagłówka chcę też ustawić dla tego kilka stylów.
Tak więc tytuł nagłówka powinien mieć kolor czarny, ponieważ będzie pasował do tego koloru tutaj, abyśmy mogli odczytać
tekst i chcę ustawić rozmiar czcionki na 18, powiedzmy, abyśmy to
trochę poprawili większy rozmiar czcionki tutaj. Dzięki temu spróbujmy użyć tego nagłówka i
użyjmy go w aplikacji. plik js tutaj. Tam mamy ten widok
i ten widok nie ma dołączonego stylu.
Zmienię to i skonfiguruję tutaj widok ekranu i nadam temu flex jednego atrybutu.
Teraz możemy to tutaj przypisać, a Flex One zapewni, że ten widok zajmie całą dostępną
przestrzeń, a ponieważ jest to widok główny naszej aplikacji, oznacza to, że zajmie
całą szerokość i wysokość, jaką może uzyskać, zajmie pełne i dlatego, ponieważ mój nagłówek zajmuje szerokość 100%, ponieważ
dodam go bezpośrednio do tego widoku, który jest teraz skonfigurowany do przyjmowania pełnej szerokości i wysokości, ten
nagłówek będzie również przyjmował pełną szerokość.
Więc teraz musimy oczywiście dodać tutaj
nagłówek, więc zaimportuj nagłówek z. / components / header,
możesz pominąć rozszerzenie pliku, a następnie po prostu dodać nagłówek jako tag samozamykający się tutaj, ale nie zapomnij
ustawić prop tytułu, ponieważ pamiętaj, że propozycję tytułu wyświetlamy między tagami tekstowymi,
więc mogę tu dodać tytuł, a ja go wymyślę, zgadnij liczbę, bo o to właśnie chodzi w naszej grze.
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
Androidzie, i powiedziałbym, że jest w porządku dla obu urządzeń. Ponownie zbadamy później sposoby
dostosowania wyglądu do konkretnego urządzenia, na którym działa Twoja aplikacja.