Lekce 5 - Komponenty

V minulé lekci, První multiplatformní aplikace, jsme si vytvořili první jednoduchou aplikaci, která nás umí pozdravit podle uživatelem zadaného oslovení.

V tomto tutoriálu vývoje multiplatformních mobilních aplikací v React Native se zaměříme na základní vestavěné (built-in) komponenty Reactu Native. Představíme si přehled jejich kategorií a na závěr si vytvoříme i naši vlastní komponentu.

Komponenty v React Native

S komponentami jsme se už v našem kurzu setkali a víme, že jsou to znovupoužitelné části uživatelského rozhraní. React Native nabízí velké množství vestavěných komponent, které se řadí do pěti kategorií. V každé z kategorií si projdeme vždy nejzákladnější komponenty, abychom získali základní přehled. Se všemi se později v kurzu do detailu seznámíme.

Základní komponenty

Komponenty v této kategorii nalezneme v podstatě v každé aplikaci. Patří sem zejména následující komponenty:

• View - je tou nejzákladnější komponentou pro stavbu uživatelského prostředí. Slouží jako kontejner pro ostatní komponenty a pomáhá se strukturou a rozložením uživatelského prostředí,
• Text - komponenta vcelku očekávatelně zobrazuje text. Její jedinečnost se skrývá v layoutu. Vše uvnitř komponenty Text přestává používat Flexbox layout a místo toho používá text layout. To znamená, že prvky uvnitř komponenty Text již nejsou obdélníky, ale při dosažení konce řádku se zalamují na nový řádek,
• Image - umožňuje zobrazení různých typů obrázků. Podporuje formáty .png, .jpg, .jpeg, .bmp, .gif, .webp a pouze na iOS také .psd,
• TextInput - základní komponenta pro zadávání textu do aplikace přes klávesnici,
• ScrollView - umožňuje zobrazení prvků přesahujících dostupný prostor na obrazovce. V takovém případě ScrollView zajistí, abychom mohli scrollovat.

...konec náhledu článku...
Pokračuj dál