Kaip naudoti „Flexbox“ programoje „React Native“.

„Flexbox“ yra CSS įrankis, leidžiantis kurti lanksčius vienmačius maketus. Tai leidžia valdyti elementų padėtį konteineryje, kad galėtumėte geriau valdyti turinio pateikimą ekrane.

Šioje pamokoje parodyta, kaip naudoti „flexbox“ programoje „React Native“, kad būtų galima sukurti lanksčius ir reaguojančius išdėstymus. Sužinosite, kaip nustatyti antrinius konteinerio elemento elementus naudodami „flexbox“ ypatybes.

„Flexbox“ elgesio palyginimas naudojant „React Native“ ir žiniatinklio kūrimą

Jei norite tvarkyti konteinerio elemento turinį naudodami flexbox paprastą CSS, turite naudoti ekranas: lankstus nuosavybė.

konteineris { ekranas: lankstus; }

Tačiau naudojant „React Native“ jums nereikia nustatyti ekranas: lankstus nuosavybė. Taip yra todėl, kad „React Native“ pagal numatytuosius nustatymus naudoja „flexbox“ maketams kurti.

Štai keletas skirtumų, kuriuos reikia nepamiršti kaip „flexbox“ elgiasi, kai naudojama lygiuojant HTML elementus

žiniatinklio programose, palyginti su tuo, kaip ji veikia „React Native“:

• flexDirection pagal nutylėjimą eilė žiniatinklio programose, bet numatytasis stulpelyje React Native.
• suderinti turinį pagal nutylėjimą ištempti žiniatinklio programose ir lankstus startas React Native.
• flexShrink numatytasis 1 žiniatinklyje ir 0 React Native.

„Flexbox“ ypatybių naudojimas „React Native“.

„Flexbox“ ypatybės leidžia aprašyti, kaip sulygiuoti konteinerio elemento antrinius elementus. Turite suprasti šias ypatybes, kad sukurtumėte sudėtingus išdėstymus, atitinkančius jūsų programos poreikius.

1. „Flex“ ypatybės naudojimas „React Native“.

The lankstus nuosavybė lemia, kaip Žiūrėti komponentas užpildo ekraną. Ši savybė priima sveikojo skaičiaus reikšmę, didesnę arba lygią 0. Reikšmė nurodo ekrano dalį Žiūrėti komponentas turėtų užimti.

Šiame pavyzdyje kuriate ekraną su vienu vaizdu iš React Native komponentų biblioteka:

importuoti Reaguoti iš"reaguoti"
importuoti { Style Sheet, View } iš"reaguoja - gimtoji"
eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (
 <>
fono spalva: "#A020F0", lankstus: 1}} /> 
 </>
 )
}

Štai išvestis:

Čia priskyrėte 1 kaip lankstumo vertę Žiūrėti komponentas. The Žiūrėti komponentas užima visą ekraną (100 %), nes erdvę suskirstėte į vieną grupę.

Pažvelkime į kitą pavyzdį:

importuoti Reaguoti iš"reaguoti"
importuoti { Style Sheet, View } iš"reaguoja - gimtoji"
eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (

fono spalva: "#A020F0", lankstus: 1}} />
fono spalva: "#7cb48f", lankstus: 3 }} /> 
 </View>
 )
}

Štai rezultatas:

Čia jūs turite du Žiūrėti elementai kitame Žiūrėti elementas. Pirmas vaikas paruoštas lankstumas: 1, o antrasis nustatytas lankstumas: 3. Šios vertybės padalija erdvę tarp dviejų vaikų. Pirmasis užima 1/4 ekrano, o antrasis – 3/4 ekrano (ekranas padalintas į 4 blokus, nes 1+3 = 4).

2. „FlexDirection“ ypatybės naudojimas „React Native“.

Jei pažvelgsite į aukščiau pateiktą ekrano kopiją, pamatysite, kad antriniai elementai yra vienas ant kito. Tai yra numatytoji flexbox elgsena React Native (flexDirection pagal numatytuosius nustatymus stulpelyje vertė).

Taip pat galite nustatyti flexDirection nuosavybė į eilė, stulpelis-reversas, ir eilė-atvirkštinė. Toliau pateiktame pavyzdyje flexDirection yra nustatytas eilė, todėl antriniai elementai dedami vienas šalia kito:

importuoti Reaguoti iš"reaguoti"
importuoti { Style Sheet, View } iš"reaguoja - gimtoji"
konst styles = StyleSheet.create({
 konteineris: {
 fono spalva: „#00FF00“,
 lankstus: 1,
 lygiuoti elementus: "centras",
 flexDirection: "eilutė",
 },
 kvadratas: {
 fono spalva: "#FF0000",
 plotis: 98,
 aukštis: 98,
 marža: 4,
 },
});
eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (




 </View>
 )
}

Štai rezultatas:

Nustatant flexDirection į eilė-atvirkštinė deda vaikus greta, bet pakeičia tvarką. Panašiai, stulpelis-reversas deda vaikus vieną ant kito, bet priešinga seka nei nustatyta stulpelyje.

3. JustifyContent naudojimas sistemoje „React Native“.

The pateisintiTurinį ypatybė sulygiuoja antrinius „flexbox“ konteinerio elementus pagal pirminę ašį. Jei flexDirection yra nustatytas stulpelyje, tada pagrindinė ašis yra vertikali ašis. Jei nustatyta eilė, tada jis yra horizontalus.

Galimos vertės pateisintiTurinįyra lankstus startas, lankstus galas, centras, tarpas-tarp, erdvė aplink, ir erdvė-tolygiai.

Toliau pateiktame pavyzdyje flexDirection nustatytas į eilutę ir pateisintiTurinįyra nustatytas lankstus startas:

importuoti Reaguoti iš"reaguoti"
importuoti { Style Sheet, View } iš"reaguoja - gimtoji"
konst styles = StyleSheet.create({
 konteineris: {
 fono spalva: „#00FF00“,
 lankstus: 1,
 JustifyContent: „lankstus startas“,
 flexDirection: "eilutė",
 },
 kvadratas: {
 fono spalva: "#FF0000",
 plotis: 98,
 aukštis: 98,
 marža: 6,
 },
});
eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (




 </View>
 )
}

Štai išvestis:

Jei pakeisite flexDirection į stulpelyje, lankstus startas bus taikoma vertikaliai ašiai. Taigi dėžutės bus sukrautos viena ant kitos.

Nustatymas pateisintiTurinį į centrą (o pagrindinė ašis yra a stulpelyje) centruoja tris vaikų dėžutes.

4. „AligItems“ naudojimas „React Native“.

The sulygintiItems ypatybė nustato elementų išdėstymą „flexbox“ talpykloje išilgai antrinės ašies. Tai yra priešinga pateisintiTurinį. Tiesiog kaip pateisintiTurinį rūpinasi vertikaliu išlygiavimu, sulygintiItems tvarko horizontalų išlyginimą. Galimos vertės sulygintiItems yra lankstus startas, lankstus galas, centras, ir pradinė linija.

Toliau pateiktame pavyzdyje flexDirection yra nustatytas eilė ir sulygintiItemsyra nustatytas lankstus startas:

importuoti Reaguoti iš"reaguoti"
importuoti { Style Sheet, View } iš"reaguoja - gimtoji"
konst styles = StyleSheet.create({
 konteineris: {
 fono spalva: „#00FF00“,
 lankstus: 1,
 lygiuoti elementus: „lankstus startas“,
 flexDirection: "eilutė",
 },
 kvadratas: {
 fono spalva: "#FF0000",
 plotis: 98,
 aukštis: 98,
 marža: 6,
 },
});
eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (





 </View>
 )
}

Štai išvestis:

Jei nustatysite flexDirection nuosavybė į stulpelyje ir sulygintiItems į centras, dėžutės bus dedamos viena ant kitos, o vaikų elementai bus sulygiuoti centre.

5. „AligSelf“ naudojimas programoje „React Native“.

The suderinti save ypatybė nustato, kaip atskiras vaikas turėtų išsilyginti konteineryje. Tai nepaiso sulygintiItems, o galimos reikšmės yra lankstus startas, lankstus galas, centras, ir pradinė linija.

Toliau pateiktame pavyzdyje nustatome numatytąjį sulygintiItems nuosavybę ir nepaisykite jos naudodami suderinti save:

importuoti Reaguoti iš"reaguoti"
importuoti { Style Sheet, View } iš"reaguoja - gimtoji"
konst styles = StyleSheet.create({
 konteineris: {
 fono spalva: „#00FF00“,
 lankstus: 1,
 lygiuoti elementus: "centras", 
 JustifyContent: "centras", 
 flexDirection: "eilutė",
 },
 kvadratas: {
 fono spalva: "#FF0000",
 plotis: 98,
 aukštis: 98,
 marža: 6,
 },
});
eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (


suderinti save: "lankstus galas" }]} />
suderinti save: „lankstus startas“ }]} /> 
 )
}

Štai rezultatas:

Kitos „Flexbox“ savybės

Yra dar dvi ypatybės, kurias galite naudoti kurdami „flexbox“ išdėstymą „React Native“:

• flexWrap: Jei konteinerio vaikai iš jo išpiltų. Naudokite flexWrap nurodyti, ar jie turi būti sutraukti į vieną eilutę, ar į kelias eilutes. Galimos reikšmės flexWrap yra nowrap ir apvynioti.
• tarpas: Jūs naudojate tarpas savybė pridėti tarpus tarp tinklelio elementų konteineryje. Jo vertė turėtų būti tokio tarpo, kokio norite tarp elementų, dydis. Galite nurodyti tarpas nuosavybė naudojant CSS vienetus, pvz., px, em arba rem.

Sužinokite daugiau apie „React Native“.

Dabar, kai suprantate „flexbox“ ir žinote, kaip ją naudoti savo programoje „React Native“, kad sukurtumėte lanksčius ir reaguojančius išdėstymus, laikas jums pereiti prie „React Native“ gudrybių.