Ako používať Flexbox v React Native

Flexbox je nástroj CSS, ktorý vám umožňuje vytvárať flexibilné jednorozmerné rozloženia. Umožňuje vám ovládať polohu prvkov v kontajneri, takže máte väčšiu kontrolu nad prezentáciou obsahu na obrazovke.

Tento tutoriál ukazuje, ako používať flexbox v React Native na vytváranie flexibilných a citlivých rozložení. Dozviete sa, ako umiestniť podradené položky prvku kontajnera pomocou vlastností flexboxu.

Porovnanie správania Flexbox v React Native a Web Development

Ak chcete usporiadať obsah prvku kontajnera pomocou flexboxu v jednoduchom CSS, musíte použiť displej: flex nehnuteľnosť.

kontajner { displej: flex; }

Ale s React Native nemusíte nastavovať displej: flex nehnuteľnosť. Je to preto, že React Native štandardne používa flexbox na vytváranie rozložení.

Tu je niekoľko rozdielov, na ktoré treba pamätať ako sa flexbox správa pri použití na zarovnanie prvkov HTML vo webových aplikáciách v porovnaní s tým, ako sa správa v React Native:

• flexDirection predvolene na riadok vo webových aplikáciách, ale predvolene je stĺpec v React Native.
• alignContent predvolene na natiahnuť vo webových aplikáciách a flexibilný štart v React Native.
• flexShrink predvolene je 1 na webe a 0 v React Native.

Používanie vlastností Flexbox v React Native

Vlastnosti Flexbox vám umožňujú opísať, ako zarovnať podradené prvky prvku kontajnera. Musíte pochopiť tieto vlastnosti, aby ste vytvorili komplexné rozloženia, ktoré vyhovujú potrebám vašej aplikácie.

1. Použitie vlastnosti flex v React Native

The flex vlastnosť určuje, ako vyhliadka komponent vyplní obrazovku. Táto vlastnosť akceptuje celočíselné hodnoty väčšie alebo rovné 0. Hodnota určuje časť obrazovky vyhliadka komponent by mal zaberať.

V tomto príklade vytvárate obrazovku s jediným pohľadom z React Natívna knižnica komponentov:

importovať Reagovať od"reagovať"
importovať { StyleSheet, View } od"reaktívny"
exportpredvolenáfunkciuApp() {
vrátiť (
 <>
farba pozadia: "#A020F0", flex: 1}} /> 
 </>
 )
}

Tu je výstup:

Tu ste priradili 1 ako flex hodnotu vyhliadka komponent. The vyhliadka komponent zaberá celú obrazovku (100 %), pretože ste priestor rozdelili do jednej skupiny.

Pozrime sa na ďalší príklad:

importovať Reagovať od"reagovať"
importovať { StyleSheet, View } od"reaktívny"
exportpredvolenáfunkciuApp() {
vrátiť (

farba pozadia: "#A020F0", flex: 1}} />
farba pozadia: "#7cb48f", flex: 3 }} /> 
 </View>
 )
}

Tu je výsledok:

Tu máte dve vyhliadka prvky v rámci iného vyhliadka element. Prvé dieťa je nastavené na ohyb: 1a druhý je nastavený na ohyb: 3. Tieto hodnoty rozdeľujú priestor medzi dve deti. Prvý zaberá 1/4 obrazovky, zatiaľ čo druhý zaberá 3/4 obrazovky (Obrazovka je rozdelená na 4 bloky, pretože 1+3 = 4).

2. Použitie vlastnosti flexDirection v React Native

Ak sa pozriete na snímku obrazovky vyššie, uvidíte, že podradené prvky sú nad sebou. Toto je predvolené správanie flexboxu v React Native (flexDirection predvolene na stĺpec hodnota).

Môžete tiež nastaviť flexDirection majetok do riadok, stĺpec-spätne, a riadok-spätne. V nasledujúcom príklade flexDirection je nastavený na riadok, preto sú podradené prvky umiestnené vedľa seba:

importovať Reagovať od"reagovať"
importovať { StyleSheet, View } od"reaktívny"
konšt styles = StyleSheet.create({
 kontajner: {
 farba pozadia: "#00FF00",
 flex: 1,
 alignItems: "stred",
 flexDirection: "riadok",
 },
 námestie: {
 farba pozadia: "#FF0000",
 šírka: 98,
 výška: 98,
 okraj: 4,
 },
});
exportpredvolenáfunkciuApp() {
vrátiť (




 </View>
 )
}

Tu je výsledok:

Nastavenie flexDirection do riadok-spätne umiestni deti vedľa seba, ale obráti poradie. Podobne aj stĺpec-spätne umiestňuje deti na seba, ale v opačnom poradí, ako je určené stĺpec.

3. Použitie justifyContent v React Native

The justifyContent vlastnosť zarovnáva podradené prvky kontajnera flexbox pozdĺž primárnej osi. Ak flexDirection je nastavený na stĺpec, potom je primárnou osou vertikálna os. Ak je nastavená na riadok, potom je to horizontálne.

Možné hodnoty justifyContentsú flexibilný štart, ohybný koniec, stred, priestor-medzi, priestor okolo, a priestor-rovnomerne.

V nasledujúcom príklade flexDirection je nastavený na riadok a justifyContentje nastavený na flexibilný štart:

importovať Reagovať od"reagovať"
importovať { StyleSheet, View } od"reaktívny"
konšt styles = StyleSheet.create({
 kontajner: {
 farba pozadia: "#00FF00",
 flex: 1,
 justifyContent: "flex-start",
 flexDirection: "riadok",
 },
 námestie: {
 farba pozadia: "#FF0000",
 šírka: 98,
 výška: 98,
 okraj: 6,
 },
});
exportpredvolenáfunkciuApp() {
vrátiť (




 </View>
 )
}

Tu je výstup:

Ak zmeníte flexDirection do stĺpec, flexibilný štart sa bude vzťahovať na vertikálnu os. Škatule budú teda naukladané na seba.

Nastavenie justifyContent do stredu (zatiaľ čo primárna os je a stĺpec) vycentruje tri detské boxy.

4. Použitie alignItems v React Native

The alignItems vlastnosť určuje umiestnenie položiek v kontajneri flexbox pozdĺž sekundárnej osi. Toto je opak justifyContent. Rovnako ako justifyContent stará sa o vertikálne vyrovnanie, alignItems zvláda horizontálne zarovnanie. Možné hodnoty alignItems sú flexibilný štart, ohybný koniec, stred, a základná línia.

V nasledujúcom príklade flexDirection je nastavený na riadok a alignItemsje nastavený na flexibilný štart:

importovať Reagovať od"reagovať"
importovať { StyleSheet, View } od"reaktívny"
konšt styles = StyleSheet.create({
 kontajner: {
 farba pozadia: "#00FF00",
 flex: 1,
 alignItems: "flex-start",
 flexDirection: "riadok",
 },
 námestie: {
 farba pozadia: "#FF0000",
 šírka: 98,
 výška: 98,
 okraj: 6,
 },
});
exportpredvolenáfunkciuApp() {
vrátiť (





 </View>
 )
}

Tu je výstup:

Ak nastavíte flexDirection majetok do stĺpec a alignItems do stred, polia budú umiestnené na seba a podradené prvky budú zarovnané na stred.

5. Použitie alignSelf v React Native

The alignSelf vlastnosť určuje, ako sa má jednotlivé dieťa zarovnať v kontajneri. Prevažuje alignItemsa možné hodnoty sú flexibilný štart, ohybný koniec, stred, a základná línia.

V nasledujúcom príklade nastavíme predvolenú hodnotu alignItems vlastnosť a prepísať ju pomocou alignSelf:

importovať Reagovať od"reagovať"
importovať { StyleSheet, View } od"reaktívny"
konšt styles = StyleSheet.create({
 kontajner: {
 farba pozadia: "#00FF00",
 flex: 1,
 alignItems: "stred", 
 justifyContent: "stred", 
 flexDirection: "riadok",
 },
 námestie: {
 farba pozadia: "#FF0000",
 šírka: 98,
 výška: 98,
 okraj: 6,
 },
});
exportpredvolenáfunkciuApp() {
vrátiť (


alignSelf: "flex-end" }]} />
alignSelf: "flex-start" }]} /> 
 )
}

Tu je výsledok:

Ďalšie vlastnosti Flexbox

Existujú dve ďalšie vlastnosti, ktoré môžete použiť pri vytváraní rozloženia flexboxu v React Native:

• flexWrap: V prípade, že deti nádoby pretečú z nej. Použite flexWrap určiť, či sa majú zmenšiť na jeden riadok alebo zabaliť do viacerých riadkov. Možné hodnoty pre flexWrap sú nowrap a obal.
• medzera: Používate medzera vlastnosť na pridanie medzier medzi položky mriežky v kontajneri. Jeho hodnota by mala byť veľkosť medzery, ktorú chcete medzi položkami. Môžete špecifikovať medzera nehnuteľnosť pomocou jednotiek CSS ako px, em alebo rem.

Zistite viac o React Native

Teraz, keď rozumiete flexboxu a viete, ako ho používať vo svojej aplikácii React Native na vytváranie flexibilných a citlivých rozložení, je čas, aby ste sa pustili do hrubej časti React Native.