Читать книгу React Native w akcji - Nader Dabit - Страница 23

Podczas budowania interfejsu użytkownika w React Native warto traktować aplikację jako złożoną z zestawu komponentów. Myśląc o tym, jak zbudowana jest strona, robimy to koncepcyjnie, ale używając pojęć, nazw lub nazw klas, takich jak nagłówek, stopka, treść, pasek boczny i tak dalej. Dzięki React Native możemy nadać tym komponentom nazwy mające sens dla nas i innych programistów, którzy będą mogli używać tego kodu, co ułatwi zapraszanie nowych osób do projektu lub przekazywanie projektu komuś innemu.

Załóżmy, że projektant wręczył nam przykładową makietę pokazaną na rysunku 1.1. Zastanówmy się, jak przekształcić to w komponenty.

Pierwszą rzeczą do zrobienia jest mentalne rozbicie elementów interfejsu użytkownika na to, co reprezentują. Przykładowa makieta ma pasek nagłówka, a na nim znajduje się tytuł i przycisk menu. Pod nagłówkiem jest umieszczony pasek zakładek, na którym znajdują się trzy indywidualne zakładki. Przejdźmy przez resztę makiety i zastanówmy się, jakie są pozostałe obiekty. Ze zidentyfikowanych elementów zostaną stworzone komponenty. Właśnie w ten sposób należy podchodzić do tworzenia interfejsu użytkownika podczas pracy z React Native: rozbijmy typowe elementy interfejsu użytkownika na komponenty wielokrotnego zastosowania i odpowiednio definiujmy ich interfejs. Gdy w przyszłości będziemy potrzebować jakiegoś elementu, będzie on dostępny do ponownego użycia.

Podział elementów interfejsu użytkownika na komponenty wielokrotnego zastosowania jest korzystny ze względu na możliwości ponownego wykorzystania kodu, a także czyni go deklaratywnym i zrozumiałym. Na przykład 12 wierszy kodu implementujących stopkę można nazwać footer. Patrząc na kod zbudowany w ten sposób, o wiele łatwiej jest zrozumieć o co chodzi i dokładnie wiedzieć, co się dzieje.

Rysunek 1.2 pokazuje, w jaki sposób można podzielić projekt z rysunku 1.1, zgodnie z tym, co właśnie napisałem. Nazwy mogą być takie, jakie mają w danym kontekście sens. Niektóre elementy są zgrupowane – w sposób logiczny oddzieliłem odrębne elementy i pogrupowałem je koncepcyjnie.

Teraz zobaczmy, jak wyglądałoby to przy użyciu rzeczywistego kodu w React Native. Najpierw przyjrzyjmy się głównym elementom interfejsu na stronie:

Rysunek 1.1. Projekt przykładowej aplikacji

<Header />

<TabBar />

<ProjectList />

<Footer />

Następnie zobaczmy, jak wyglądają elementy potomne:

TabBar:

<TabBarItem />

<TabBarItem />

<TabBarItem />

ProjectList:

// Podaj komponent Projekt do każdego projektu na liście:

<Project />

Użyłem nazw zadeklarowanych na rysunku 1.2, ale mogą być one czymkolwiek innym, co będzie miało sens.