Teraz dzięki temu wszystkim nauczyłeś się dużo o tym, jak tworzyć prawdziwe aplikacje za pomocą React Native.
Nauczyłeś się wiele o wbudowanych komponentach, nauczyłeś
się dużo o stylizacji i jak układać rzeczy tak, jak chcesz i
jak stylizować
rzeczy tak, jak chcesz, a także o tym, jak stylizacja różni się między niektórymi komponentami, na przykład, że w
przypadku komponentów tekstowych styl jest
do pewnego stopnia kaskadowany, więc style są tam dziedziczone w stylach zagnieżdżonych, coś, z czego
korzystamy w grze nad ekranem, ale we wszystkich innych komponentach, takich jak widok, style, które stosujesz do niego naprawdę odnoszą się
tylko do tego widoku i nie są kaskadowane, nie są współużytkowane z żadnymi zagnieżdżonymi widokami potomnymi.
Nauczyłeś się również, jak możesz udostępniać wspólne style, na przykład niestandardowym komponentom, takim jak nasz tekst
podstawowy, który tworzy ogólną rodzinę czcionek, dzięki czemu możemy używać tekstu podstawowego zamiast tekstu wbudowanego, jeśli
chcemy tekst z tą rodziną czcionek.
Oczywiście jest to koncepcja, którą możesz zastosować do dowolnej stylizacji, którą
chcesz, tak jak robimy to również dla rodzaju karty, gdzie mamy prestiżowy widok, aby dać nam ten
ładny wygląd karty z odrobiną cienia.
Nauczyłeś się również, jak skonfigurować niektóre motywy ze stałymi, które możesz zaimportować do różnych plików,
zarówno dla kolorów tutaj, jak i, jeśli ich potrzebujesz, stylów tekstu lub dowolnego innego stylu, który chcesz współdzielić
między komponentami, abyś nie „ Trzeba to cały czas przepisywać, szczególnie przydatne w przypadkach, gdy nie
chcesz lub gdzie nie możesz tworzyć osobnych komponentów, ponieważ
robimy to na przykład dla rodziny czcionek.
Więc jeśli nie jest to możliwe, co w przypadku kolorów byłoby trudne,
ponieważ potrzebujemy kolorów we wszystkich miejscach, wówczas takie wspólne style lub wspólne stałe są świetnym sposobem i ogólnie
mam nadzieję, że masz poczucie, jak komponuj interfejsy użytkownika z wbudowanymi komponentami i własnymi
niestandardowymi komponentami, które następnie budują się na wbudowanych komponentach i jak w ten
sposób możesz budować ładne aplikacje React Native.
Przyjrzeliśmy się niektórym kluczowym komponentom, dlatego też chcę dać krótkie podsumowanie tego, czego dowiedziałeś
się o tych komponentach tutaj.
Prawdopodobnie najważniejszym komponentem jest widok, który jest pojemnikiem, który owija się wokół
innych komponentów, aby następnie rozłożyć te komponenty lub dodać określone style kontenerów, takie jak cienie,
obramowania, kolor tła itp. Równie ważny
jest komponent tekstowy, którego używasz do generowania tekstu.
Możesz również zagnieździć tekst w tekście, w którym jakiś styl jest nawet współużytkowany, i ogólnie możesz
kontrolować sposób wyświetlania tekstu, jeśli ma się on owijać, co jest ustawieniem domyślnym, lub jeśli
powinien wypisywać
tylko jeden lub dwa wiersze i tam jest komponent tekstowy naprawdę pomaga przekazać użytkownikom te cenne informacje.
Teraz czasami nie chcesz tylko wyświetlać informacji, ale także pobierać informacje, a do
tego pomocne może być wprowadzanie tekstu.
Teraz zagłębimy się w pobieranie informacji od użytkowników w dalszej części kursu, ale już zobaczyłeś, jak możesz je stylizować
i jak je skonfigurować oraz jak upewnić się, że otrzymujesz właściwe dane wejściowe i jesteś sprawdzanie poprawności danych
wejściowych i tak naprawdę pracujesz tylko z danymi wejściowymi, których potrzebujesz. Mówiąc teraz o danych wejściowych od użytkownika,
przycisk jest oczywiście również kluczowym elementem, ponieważ wbudowany
przycisk lub własny przycisk, który można zbudować za pomocą dotykowych elementów, które są
również bardzo ważne, i w
przypadkach, w których trzeba wyprowadzić listy danych, nauczyłeś się o FlatList i widoku przewijania, gdzie główną
różnicą jest to, że FlatList jest zoptymalizowany dla bardzo długich list lub list, w których
tak naprawdę nie wiesz, jak długo będą, ale potencjalnie są
one bardzo długie, podczas gdy widok przewijania jest świetny dla wszelkie inne przewijalne treści, które nie są nieskończenie
długie, w których z pewnością przekroczysz granice ekranu, ale nie będzie to zbyt duża zawartość dodatkowa, ponieważ
jeśli cała ta dodatkowa zawartość zostanie wyświetlona bez użycia, bez widoczności dla użytkownik, wtedy marnujesz wydajność
i
do tego dochodzi FlatList,
ponieważ renderuje tylko to, co użytkownik może naprawdę zobaczyć.
Mówiąc o tym, co użytkownik może zobaczyć, w tym module nauczyłeś się również, jak dodawać własne czcionki,
a czasami nie potrzebujesz czcionki, ale obrazu, nauczyłeś się również,
jak to zrobić, jak uwzględnić zarówno lokalną, jak i sieciową obrazy i jak je stylizować, aby wyglądały dobrze.
Mówiąc o stylizacji, do tego używamy arkusza stylów, który nie jest składnikiem, ale klasą
lub obiektem dostarczonym przez
React Native, a zaletą korzystania z tego arkusza stylów jest nie tylko to, że wyciągniesz
swoje style z kodu jsx, który chcesz zachować względnie szczupłą, zwięzłą i zwięzłą formę, ale otrzymujesz także automatyczne
sprawdzanie poprawności swoich stylów, a React Native informuje cię, kiedy używasz stylu niepoprawnie i że
w przyszłości możesz również uzyskać dodatkowe optymalizacje wydajności. W związku z tym możemy tylko zachęcić Cię do
zapamiętania tego
rozdziału, być może przejrzyj go jeszcze raz i wykorzystaj jako podstawę do dalszych postępów w kursie, w którym będziemy
wykorzystywać wszystkie te elementy, z którymi współpracowaliśmy, i gdzie napiszemy więcej style, w których będziemy budować bardziej
złożone interfejsy użytkownika i gdzie naprawdę będziesz potrzebować tych podstaw, których nauczyłeś się w drugim i
tym module kursu, aby następnie zbudować niesamowite aplikacje React Native.
Przejdźmy więc dalej.