Kā lietot Flexbox programmā React Native

Flexbox ir CSS rīks, kas ļauj izveidot elastīgus viendimensijas izkārtojumus. Tas ļauj kontrolēt elementu novietojumu konteinerā, lai jūs varētu vairāk kontrolēt satura parādīšanu ekrānā.

Šī apmācība parāda, kā izmantot flexbox programmā React Native, lai izveidotu elastīgus un atsaucīgus izkārtojumus. Jūs uzzināsit, kā novietot konteinera elementa pakārtotos vienumus, izmantojot flexbox rekvizītus.

Flexbox uzvedības salīdzināšana React Native un tīmekļa izstrādē

Ja vēlaties kārtot konteinera elementa saturu, izmantojot flexbox vienkāršu CSS, jums ir jāizmanto displejs: flex īpašums.

konteiners { displejs: flex; }

Bet, izmantojot React Native, jums nav jāiestata displejs: flex īpašums. Tas ir tāpēc, ka React Native pēc noklusējuma izmanto flexbox, lai izveidotu izkārtojumus.

Šeit ir dažas atšķirības, kas jāpatur prātā kā flexbox darbojas, kad to izmanto HTML elementu līdzināšanai tīmekļa lietotnēs salīdzinājumā ar to, kā tas darbojas React Native:

• flexDirection pēc noklusējuma uz rinda tīmekļa lietojumprogrammās, bet pēc noklusējuma ir kolonna programmā React Native.
• alignContent pēc noklusējuma uz stiept tīmekļa lietojumprogrammās un flex-start programmā React Native.
• flexShrink noklusējuma vērtība ir 1 tīmeklī un 0 programmā React Native.

Flexbox rekvizītu izmantošana programmā React Native

Flexbox rekvizīti ļauj aprakstīt, kā līdzināt konteinera elementa pakārtotos elementus. Jums ir jāsaprot šīs īpašības, lai izveidotu sarežģītus izkārtojumus, kas atbilst jūsu lietojumprogrammas vajadzībām.

1. Flex rekvizīta izmantošana programmā React Native

The flex īpašums nosaka, kā Skatīt komponents aizpilda ekrānu. Šis rekvizīts pieņem vesela skaitļa vērtību, kas ir lielāka vai vienāda ar 0. Vērtība norāda ekrāna daļu Skatīt komponentam vajadzētu aizņemt.

Šajā piemērā jūs veidojat ekrānu ar vienu skatu no React Native komponentu bibliotēka:

imports Reaģēt no"reaģēt"
imports { Style Sheet, View } no"reaģēt-native"
eksportētnoklusējumafunkcijuApp() {
atgriezties (
 <>
fona krāsa: "#A020F0", flex: 1}} /> 
 </>
 )
}

Šeit ir izvade:

Šeit jūs piešķīrāt 1 kā elastības vērtību Skatīt komponents. The Skatīt komponents aizņem visu ekrānu (100%), jo esat sadalījis vietu vienā grupā.

Apskatīsim citu piemēru:

imports Reaģēt no"reaģēt"
imports { Style Sheet, View } no"reaģēt-native"
eksportētnoklusējumafunkcijuApp() {
atgriezties (

fona krāsa: "#A020F0", flex: 1}} />
fona krāsa: "#7cb48f", flex: 3 }} /> 
 </View>
 )
}

Lūk, rezultāts:

Šeit jums ir divi Skatīt elementi citā Skatīt elements. Pirmais bērns ir iestatīts uz elastīgums: 1, un otrais ir iestatīts uz elastīgums: 3. Šīs vērtības sadala telpu starp diviem bērniem. Pirmais aizņem 1/4 no ekrāna, bet otrais aizņem 3/4 no ekrāna (ekrāns ir sadalīts 4 blokos, jo 1+3 = 4).

2. Īpašuma flexDirection izmantošana programmā React Native

Ja skatāties uz iepriekš redzamo ekrānuzņēmumu, redzēsit, ka pakārtotie elementi atrodas viens virs otra. Šī ir flexbox noklusējuma darbība programmā React Native (flexDirection noklusējuma vērtība ir kolonna vērtība).

Varat arī iestatīt flexDirection īpašumu uz rinda, kolonna-reverss, un rinda-reverss. Nākamajā piemērā flexDirection ir iestatīts uz rinda, tāpēc bērnu elementi tiek novietoti blakus:

imports Reaģēt no"reaģēt"
imports { Style Sheet, View } no"reaģēt-native"
konst stili = StyleSheet.create({
 konteiners: {
 fona krāsa: "#00FF00",
 flex: 1,
 alignItems: "centrs",
 flexDirection: "rinda",
 },
 kvadrāts: {
 fona krāsa: "#FF0000",
 platums: 98,
 augstums: 98,
 piemale: 4,
 },
});
eksportētnoklusējumafunkcijuApp() {
atgriezties (




 </View>
 )
}

Lūk, rezultāts:

Iestatīšana flexDirection uz rinda-reverss novieto bērnus blakus, bet tas maina secību. Līdzīgi, kolonna-reverss novieto bērnus vienu virs otra, bet pretējā secībā tai, ko nosaka kolonna.

3. JustifyContent izmantošana programmā React Native

The justifyContent rekvizīts izlīdzina flexbox konteinera pakārtotos elementus pa primāro asi. Ja flexDirection ir iestatīts uz kolonna, tad primārā ass ir vertikālā ass. Ja tas ir iestatīts uz rinda, tad tas ir horizontāli.

Iespējamās vērtības justifyContentir flex-start, flex-end, centrs, telpa starp, telpa-ap, un telpa-vienmērīgi.

Nākamajā piemērā flexDirection ir iestatīts uz rindu un justifyContentir iestatīts uz flex-start:

imports Reaģēt no"reaģēt"
imports { Style Sheet, View } no"reaģēt-native"
konst stili = StyleSheet.create({
 konteiners: {
 fona krāsa: "#00FF00",
 flex: 1,
 justifyContent: "flex-start",
 flexDirection: "rinda",
 },
 kvadrāts: {
 fona krāsa: "#FF0000",
 platums: 98,
 augstums: 98,
 piemale: 6,
 },
});
eksportētnoklusējumafunkcijuApp() {
atgriezties (




 </View>
 )
}

Šeit ir izvade:

Ja maināt flexDirection uz kolonna, flex-start attieksies uz vertikālo asi. Tātad kastes tiks sakrautas viena virs otras.

Iestatījums justifyContent uz centru (kamēr primārā ass ir a kolonna) centrē trīs bērnu kastes.

4. alignItems izmantošana programmā React Native

The alignItems rekvizīts nosaka vienumu izvietojumu flexbox konteinerā pa sekundāro asi. Tas ir pretējs justifyContent. Tieši kā justifyContent rūpējas par vertikālo izlīdzināšanu, alignItems apstrādā horizontālo izlīdzināšanu. Iespējamās vērtības alignItems ir flex-start, flex-end, centrs, un bāzes līnija.

Nākamajā piemērā flexDirection ir iestatīts uz rinda un alignItemsir iestatīts uz flex-start:

imports Reaģēt no"reaģēt"
imports { Style Sheet, View } no"reaģēt-native"
konst stili = StyleSheet.create({
 konteiners: {
 fona krāsa: "#00FF00",
 flex: 1,
 alignItems: "flex-start",
 flexDirection: "rinda",
 },
 kvadrāts: {
 fona krāsa: "#FF0000",
 platums: 98,
 augstums: 98,
 piemale: 6,
 },
});
eksportētnoklusējumafunkcijuApp() {
atgriezties (





 </View>
 )
}

Šeit ir izvade:

Ja iestatāt flexDirection īpašumu uz kolonna un alignItems uz centrs, kastes tiks novietotas viena virs otras, un bērnu elementi tiks līdzināti centrā.

5. alignSelf izmantošana programmā React Native

The līdzināties rekvizīts nosaka, kā atsevišķam bērnam ir jāizlīdzinās konteinerā. Tas ignorē alignItems, un iespējamās vērtības ir flex-start, flex-end, centrs, un bāzes līnija.

Nākamajā piemērā mēs iestatām noklusējuma vērtību alignItems īpašumu un ignorēt to, izmantojot līdzināties:

imports Reaģēt no"reaģēt"
imports { Style Sheet, View } no"reaģēt-native"
konst stili = StyleSheet.create({
 konteiners: {
 fona krāsa: "#00FF00",
 flex: 1,
 alignItems: "centrs", 
 justifyContent: "centrs", 
 flexDirection: "rinda",
 },
 kvadrāts: {
 fona krāsa: "#FF0000",
 platums: 98,
 augstums: 98,
 piemale: 6,
 },
});
eksportētnoklusējumafunkcijuApp() {
atgriezties (


līdzināties: "elastīgs gals" }]} />
līdzināties: "flex-start" }]} /> 
 )
}

Lūk, rezultāts:

Citi Flexbox rekvizīti

Ir divi citi rekvizīti, kurus varat izmantot, veidojot flexbox izkārtojumu programmā React Native.

• flexWrap: Gadījumā, ja konteinera bērni izplūst no tā. Izmantot flexWrap lai norādītu, vai tie ir jāsarauj vienā rindā vai jāietver vairākās rindās. Iespējamās vērtības priekš flexWrap ir nowrap un iesaiņojums.
• plaisa: Jūs izmantojat plaisa rekvizītu, lai pievienotu atstarpes starp režģa vienumiem konteinerā. Tās vērtībai ir jāatbilst atstarpei, kuru vēlaties starp vienumiem. Jūs varat norādīt plaisa īpašums izmantojot CSS vienības, piemēram, px, em vai rem.

Uzziniet vairāk par React Native

Tagad, kad jūs saprotat flexbox un zināt, kā to izmantot savā React Native lietotnē, lai izveidotu elastīgus un atsaucīgus izkārtojumus, ir pienācis laiks iedziļināties React Native lietpratībā.