Aby to zrobić, warto zacząć tutaj w aplikacji. plik js.
Teraz zostaw ten terminal otwarty tutaj i ten proces
oczywiście uruchomiony, aby zmiany w kodzie były automatycznie odzwierciedlane w emulatorach i
teraz zobaczmy, jak możemy zacząć od tego.
Wspomniałem już w pierwszym module kursu, że React Native dotyczy wbudowanych podstawowych
elementów, takich jak tekst i widok. Widok byłby twój div z tworzenia stron
internetowych na wypadek, gdybyś był programistą, którym prawdopodobnie jesteś, jeśli znasz React.
Jest to więc świetny
komponent kontenerowy, możesz go stylizować tak, jak go tu widzisz i owijać nim inne treści.
Teraz z drugiej strony tekst jest podstawowym składnikiem tekstu wyjściowego, to
jest jego cel, nie tam, aby wydrukować obraz, ale tam, aby wydrukować tekst.
Teraz to, czego nie możesz zrobić w React Native, a to pierwsza ważna rzecz, nie możesz na
przykład wyprowadzać tekstu między takimi widokami.
Jeśli spróbujemy zapisać to bez tego opakowania tekstowego, zobaczysz błąd. Tak przy okazji, ekran będzie od
czasu do czasu wyświetlany podczas pracy z React Native, daje błąd,
wyjaśnia, co poszło nie tak. Tutaj na przykład dość wyraźny komunikat o błędzie mówi nam, że ciągi
tekstowe muszą być renderowane w elemencie tekstowym i
dlaczego jest to takie ważne?
Dlaczego to podkreślam?
Ponieważ jest to ważna różnica w tworzeniu stron internetowych, tam możesz
umieścić tekst w dowolnym miejscu. Podczas tworzenia stron
internetowych możesz mieć div, a pomiędzy tagami otwierającymi i zamykającymi div, możesz mieć dowolny tekst, a to nie będzie działać w
React Native, nie tylko dlatego, że używamy div, który nie jest tam obsługiwany, ale
oczywiście dlatego, że na React Native, naprawdę możesz wyprowadzać tekst tylko między tagami tekstowymi, więc musisz użyć tego komponentu tekstowego dostarczonego przez
React Native, aby wyprowadzić tekst, i to jest zasadnicza różnica w Internecie, gdzie możesz wyrzucać tekst w dowolnym
miejscu i w React Native, to sposób ważniejsze jest to, że używasz odpowiedniego wbudowanego komponentu do
zadania, które chcesz wykonać, i do stylizacji, do konfigurowania kontenera, w którym budujesz inną zawartość, która byłaby
widokiem, do wyprowadzania tekstu, który mógłby być tekstem. Na przykład do wyprowadzenia obrazu
będziesz mieć komponent obrazu. Więc tak działa React Native i
mówiąc o stylizacji, układaniu, widok ma to jako główne zadanie, głównie tam, aby zastosować style i układać
zawartość, którą tam masz i
mówiąc o tym, zacznijmy od układu.
Powiedzmy, że w naszej aplikacji chcemy mieć na tym ekranie dwa główne obszary. Na górze chcę pozwolić użytkownikowi na
wprowadzenie tekstu, a po prawej stronie chcę mieć przycisk potwierdzający ten wybór, a poniżej tego,
więc
jest to
pierwsza część, obszar wprowadzania, a poniżej mamy druga część i to jest lista
celów wpisanych przez użytkownika.
Dlatego też tutaj w aplikacji. js, możemy zacząć od widoku zawijania, ponieważ
tak jak w normalnym React, musisz mieć jeden komponent nadrzędny, który zwykle będzie widokiem w
React Native, ponieważ daje to najwięcej opcji układu i stylów oraz
wewnątrz tego widoku, moglibyśmy mieć inny widok dla obszaru wprowadzania, w którym następnie dodajemy nasze dane wejściowe, a poniżej
tego, jeszcze inny widok, aby mieć naszą listę celów, a ja pozbędę się tego tekstu i
jest całkiem normalne w React Native, że masz całkiem sporo widoków zagnieżdżonych w sobie, dzięki czemu można zbudować dowolny układ.
A teraz przy okazji pozbądźmy się tego kontenera, a także tego przypisania stylu i zacznijmy od
tego wszystkiego od zera.
Ważne na teraz, że każdy element dostarczany przez React Native ma swoje własne zadanie, nie ma
tak wielu składników, ale te, które tam są, mają jasno określone role, a następnie budujesz
swój interfejs użytkownika, zagnieżdżając te składniki w zależności od tego, co chcesz osiągnąć,
na przykład jeśli chcesz zbudować układ, zaczynasz od zagnieżdżenia kilku widoków, a następnie,
gdy jesteś w części, w której chcesz wyprowadzać zawartość, zaczniesz dodawać teksty i tak
dalej, a my Zrobię to wszystko podczas następnych wykładów. Zawsze możesz także przejść do oficjalnych dokumentów React Native, a tam, gdzie klikniesz
Przewodniki, Komponenty i interfejsy API, uzyskasz przegląd tych podstawowych elementów składowych. Znajdziesz tutaj widok, tekst, obraz, tekst, o którym wspomniałem
już wcześniej, oraz kilka innych podstawowych składników i zobaczysz prawie wszystkie z nich lub
większość z nich podczas tego kursu, a to jest świetne miejsce do nurkowania głębiej
i dowiedz się więcej na ich temat, a jak już wiesz, czy
pominiesz te specyficzne dla platformy, które są bardziej niszowe, nie ma tak wielu podstawowych komponentów, tylko około 10
podstawowych komponentów i tak działa React Native. Niemniej jednak będziesz mógł zbudować dowolną
aplikację, jak chcesz.