5. diel - Komponenty

V minulej lekcii, React Native - Dokončenie TODO aplikácie , sme si vytvorili nové komponenty a tým dokončili TODO aplikáciu.

V tomto tutoriále vývoja multiplatformných mobilných aplikácií v React Native sa zameriame na základné vstavané (built-in) komponenty Reactu Native. Predstavíme si prehľad ich kategórií a na záver si vytvoríme aj náš vlastný komponent.

Komponenty v React Native

S komponentami sme sa už v našom kurze stretli a vieme, že sú to znovupoužiteľné časti používateľského rozhrania. React Native ponúka veľké množstvo vstavaných komponentov, ktoré sa radí do piatich kategórií. V každej z kategórií si prejdeme vždy najzákladnejšie komponenty, aby sme získali základný prehľad. So všetkými sa neskôr v kurze do detailu zoznámime.

Základné komponenty

Komponenty v tejto kategórii nájdeme v podstate v každej aplikácii. Patria sem najmä nasledujúce komponenty:

• View - je tým najzákladnejším komponentom pre stavbu užívateľského prostredia. Slúži ako kontajner pre ostatné komponenty a pomáha so štruktúrou a rozložením užívateľského prostredia,
• Text - komponent vcelku očakávateľne:-) zobrazuje text. Jej jedinečnosť sa skrýva v layoutu. Všetko vo vnútri komponentu Text prestáva používať Flexbox layout a namiesto toho používa text layout. To znamená, že prvky vo vnútri komponentu Text už nie sú obdĺžniky, ale pri dosiahnutí konca riadku sa zalamujú na nový riadok,
• Image - umožňuje zobrazenie rôznych typov obrázkov. Podporuje formáty .png, .jpg, .jpeg, .bmp, .gif, .webp a iba na iOS tiež .psd,
• TextInput - základný komponent pre zadávanie textu do aplikácie cez klávesnicu,
• ScrollView - umožňuje zobrazenie prvkov presahujúcich dostupný priestor na obrazovke. V takom prípade ScrollView zaistí, aby sme mohli zcrollovať.

...koniec náhľadu článku...
Pokračuj ďalej