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
lub nie sprawi, że coś będzie miało znaczenie dla ekranu. W tym pierwszym zagnieżdżonym widoku tutaj,
w
tym bloku, poszedłem wprowadzić tekst i przycisk. Dogodnie, oba są dostarczane przez React Native,
mamy tutaj tekst, a także przycisk. Możemy więc zaimportować zarówno tekst, który pozwala
użytkownikowi wprowadzić tekst i przycisk, a następnie w tym widoku, w tym pierwszym zagnieżdżonym widoku
dodam tekst jako tag samozamykający się, ponieważ nie możemy nic przekazać między otwieraniem i zamykanie tagów, a dla
przycisku możesz pomyśleć,
że używasz takiego przycisku, ale tak naprawdę nie działa ten przycisk React Native,
zamiast
tego jest to przycisk samozamykający się i ustawiasz właściwość title, aby zdefiniować tekst, który
ma być renderowany, i tutaj możemy powiedzieć dodać. Teraz mamy tam wprowadzanie tekstu i przycisk,
a jeśli zapiszemy to i to się ponownie ładuje, widzimy tutaj przycisk, ale nie widzimy wprowadzania tekstu, prawda?
To nie działa zgodnie z przeznaczeniem.
Powodem tego jest fakt, że wprowadzanie tekstu zostanie ukryte tutaj poniżej paska stanu.
Więc teraz jest czas, kiedy powinniśmy zacząć od dodania jakiegoś układu, jakiejś struktury
do tej strony, ponieważ samo
dodanie składników nie załatwi sprawy, aplikacja React Native polega na użyciu składników,
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
w tym widoku z góry, więc dopełnienie jest w pewnej odległości od granicy tego widoku, która
w naszym przypadku jest zasadniczo
ramką urządzenia, ponieważ jestem mówiąc o najwyższym widoku do zawartości widoku, więc pewne odstępy między
granicami najwyższego widoku, otaczającego widoku i treści w widoku, i do tego możemy dodać właściwość
stylu tutaj w widoku.
Większość komponentów w React Native obsługuje właściwość style, widok tam i tam, używasz tego dynamicznego wiązania
treści tutaj, które znasz z normalnego React również z pojedynczymi nawiasami klamrowymi
i styl oczekuje teraz obiektu JavaScript. Więc dodajemy tutaj kolejną parę nawiasów klamrowych, a
teraz powszechnym błędem jest to, że uważasz, że jest to specjalna składnia,
która wymaga podwójnych nawiasów klamrowych, w rzeczywistości jest to normalna składnia React z podobnie nawiasami klamrowymi, w
których następnie wartość dynamiczną przekazujesz do stylu akurat jest obiektem
JavaScript, dlatego mamy kolejną parę nawiasów klamrowych. W tym obiekcie możesz teraz
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
stylu, a na te nazwy właściwości stylu ma wpływ CSS.
Więc tutaj możesz dodać dopełnienie, które istnieje również w React Native, a pełną listę
obsługiwanych właściwości stylu można zawsze znaleźć, przechodząc do używanego komponentu, na
przykład widok tutaj, a następnie klikając we właściwości stylu i tutaj, jeśli klikniesz style widoku,
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,
a następnie niektóre ogólne rekwizyty, takie jak rekwizyty układu i tam, znajdziesz na przykład wyściółkę.
W ten sposób możesz dowiedzieć się, co jest obsługiwane, ale zobaczysz również wiele przykładów na tym kursie.
Dodam tutaj dopełnienie, a wartością może być teraz liczba, która będzie pikselami niezależnymi od urządzenia,
więc wartość piksela, która zawsze wygląda dobrze, bez względu na rozmiar urządzenia.
Więc tutaj możemy dodać 10, a jeśli to zrobimy, teraz widzimy, że przycisk jest nieco niższy,
może dodajmy tutaj 30, aby zobaczyć większą różnicę, a teraz działa, a teraz,
jeśli stukniesz nad przyciskiem, tak naprawdę nie widzisz tutaj danych wejściowych,
ale widzisz, że moja miękka klawiatura otworzyła się na Androidzie, na iOS nie otwiera
się domyślnie, ale tam też możesz stuknąć
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
również otworzyć, więc tutaj też mamy
dane wejściowe.
Teraz możemy zobaczyć to wejście, ponieważ teraz nie jest już za tym paskiem stanu.
Dodanie tego wypełnienia prawdopodobnie miało sens, ponieważ teraz upewniliśmy się, że nasz układ znajduje się
tutaj na ekranie.
Teraz istnieją inne narzędzia do upewnienia się, że mamy tutaj
wystarczającą ilość wypełnienia, ale na razie ręcznie ustawmy wypełnienie i może ustawimy wartość 30.
Więc zaczynaliśmy od układu, teraz wróćmy
do tego komponentu i upewnijmy się, że możemy coś zobaczyć,
możemy zobaczyć, że jest wprowadzanie tekstu i nie musimy tylko zgadywać.
W tym celu możemy przejść do wprowadzania tekstu i tam na przykład dodać symbol zastępczy i
tak jak wcześniej, aby dowiedzieć
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,
jak go używać i kilka przykładów,
ale jeśli przewiniesz w dół, znajdziesz również wszystkie rekwizyty, które możesz ustawić, a tam na przykład odkryjesz,
że możesz ustawić zastępczą rekwizyt, czyli ten fikcyjny tekst, który jest wyświetlany, zanim użytkownik wprowadzi
jakiś tekst.
Więc tutaj, to wymaga ciągu i tutaj możemy wprowadzić cel kursu, ponieważ powinieneś być w stanie
ustawić swój cel
kursu tutaj, a jeśli to zrobisz, zobaczysz zarówno na Androidzie, jak
i na iOS, ten tekst celu kursu.
Teraz może być nieco lepiej,
może być nieco jaśniej, że wprowadzanie tekstu jest możliwe, dlatego tutaj dodam styl,
inny
styl wbudowany i tutaj ustawię teraz kolor dolnej czerni, czerni jest ciągiem, takie skróty kolorów są obsługiwane w React
Native, a do tego wykładu dołączona jest wyczerpująca lista wszystkich dostępnych kolorów, a
także widzę, że szerokość dolnej granicy powiedzmy 1 i to, co to robi, powinno ustawić dolne obramowanie
tego wejścia, więc jeśli teraz wrócimy, mamy to podkreślenie, możemy wyraźnie to zobaczyć na
iOS, a ponieważ wciąż nie ma tak dużo miejsca na iOS, pozwól mi teraz
zwiększyć to dopełnienie do 50, tak, wygląda to lepiej.
Więc teraz mamy tę granicę poniżej naszych danych wejściowych, co wyjaśnia, że tutaj jest dane wejściowe.
Oczywiście nie jesteś ograniczony do ustawiania tylko granicy na
dole, możesz także ustawić ogólną
granicę, pozostawiając tutaj dół, kolor ramki i szerokość
ramki, a jeśli to zrobisz, to będzie otoczony granica.
Teraz jedna ważna uwaga dotycząca tych nazw stylów, nazw właściwości stylów, oczywiście widzisz, że
jest to szerokość ramki, kolor ramki napisany w ten sposób, w normalnym CSS, miałbyś kolor ramki i
to zastosowałoby kolor ramki, ale to by być niepoprawną nazwą właściwości w Javascript, dlatego nie
jest to obsługiwane.
Właściwie, prawidłowa nazwa właściwości w Javascripcie byłaby, gdybyś zawinął to w cudzysłów, ale nawet
to nie jest obsługiwane w React Native, więc te alternatywne składnie, na przykład ta składnia działałyby w
JavaScript, jeśli zastosujesz jakiś styl do elementu HTML HTML , te składnie nie są obsługiwane w React Native, tam naprawdę
musisz użyć tej składni wielbłąda, gdzie na przykład piszesz taki kolor obramowania
lub w skrócie, musisz użyć nazw właściwości, które znajdziesz również w oficjalnych dokumentach, tam nie są
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
ramką a rzeczywistą częścią, w której coś wchodzimy, i powiedziałbym, że to już wygląda o
wiele lepiej, a my widzimy wyraźnie, że tutaj mamy dane wejściowe, w których użytkownicy mogą
coś wpisać.