Használja a flexboxot rugalmas és rugalmas elrendezések létrehozásához a React Native alkalmazásban.

A Flexbox egy CSS-eszköz, amellyel rugalmas egydimenziós elrendezéseket hozhat létre. Lehetővé teszi az elemek helyzetének szabályozását a tárolón belül, így jobban irányíthatja a tartalom képernyőn való megjelenítését.

Ez az oktatóanyag bemutatja, hogyan használhatja a flexboxot a React Native alkalmazásban rugalmas és rugalmas elrendezések létrehozásához. Megtanulja, hogyan helyezheti el a tárolóelemek gyermekelemeit a flexbox tulajdonságok segítségével.

A Flexbox viselkedésének összehasonlítása a React Native és a webfejlesztésben

Ha a tárolóelem tartalmát flexbox segítségével szeretné rendezni egyszerű CSS-ben, akkor a kijelző: flex ingatlan.

konténer { kijelző: Flex; }

De a React Native használatával nem kell beállítania a kijelző: flex ingatlan. Ennek az az oka, hogy a React Native alapértelmezés szerint a flexboxot használja az elrendezések felépítéséhez.

Íme néhány különbség, amelyeket érdemes szem előtt tartani

instagram viewer
hogyan viselkedik a flexbox a HTML-elemek igazításakor webalkalmazásokban, szemben azzal, hogyan viselkedik a React Native-ban:

  • flexDirection alapértelmezés szerint sor webes alkalmazásokban, de alapértelmezés szerint oszlop a React Native alkalmazásban.
  • alignContent alapértelmezés szerint nyújtózkodni webes alkalmazásokban és flex-start a React Native alkalmazásban.
  • flexShrink alapértelmezés szerint 1 a weben és 0 a React Native esetén.

A Flexbox tulajdonságok használata a React Native alkalmazásban

A Flexbox tulajdonságai lehetővé teszik a tárolóelem gyermekelemeinek igazításának leírását. Meg kell értenie ezeket a tulajdonságokat, hogy olyan összetett elrendezéseket hozzon létre, amelyek megfelelnek az alkalmazás igényeinek.

1. A flex tulajdonság használata a React Native alkalmazásban

A Flex tulajdonság határozza meg, hogy a Kilátás összetevő kitölti a képernyőt. Ez a tulajdonság 0-nál nagyobb vagy azzal egyenlő egész értéket fogad el. Az érték a képernyő törtrészét adja meg Kilátás alkatrésznek fel kell vennie.

Ebben a példában egyetlen nézetű képernyőt hoz létre a React Natív összetevők könyvtára:

import Reagál tól től"reagál"
import { Stíluslap, Nézet } tól től"react-native"
exportalapértelmezettfunkcióApp() {
Visszatérés (
 <>
háttérszín: "#A020F0", Flex: 1}} /> 
 </>
 )
}

Íme a kimenet:

Itt az 1-et rendelte hozzá a flex értékeként Kilátás összetevő. A Kilátás komponens a teljes képernyőt (100%) elfoglalja, mert a helyet egy csoportra osztotta.

Nézzünk egy másik példát:

import Reagál tól től"reagál"
import { Stíluslap, Nézet } tól től"react-native"
exportalapértelmezettfunkcióApp() {
Visszatérés (

háttérszín: "#A020F0", Flex: 1}} />
háttérszín: "#7cb48f", Flex: 3 }} /> 
 </View>
 )
}

Íme az eredmény:

Itt van kettő Kilátás elemek egy másikon belül Kilátás elem. Az első gyerek be van állítva flex: 1, a második pedig a következőre van állítva flex: 3. Ezek az értékek megosztják a teret a két gyerek között. Az első a képernyő 1/4-ét, míg a második a képernyő 3/4-ét (a képernyő 4 blokkra van felosztva, mert 1+3 = 4).

2. A flexDirection tulajdonság használata a React Native alkalmazásban

Ha megnézi a fenti képernyőképet, látni fogja, hogy a gyermekelemek egymáson vannak. Ez a flexbox alapértelmezett viselkedése a React Native (flexDirection alapértelmezés szerint a oszlop érték).

Azt is beállíthatja a flexDirection tulajdonát sor, oszlop-fordítás, és sor-fordított. A következő példában flexDirection be van állítva sor, ezért a gyermekelemek egymás mellé kerülnek:

import Reagál tól től"reagál"
import { Stíluslap, Nézet } tól től"react-native"
const styles = StyleSheet.create({
 konténer: {
 háttérszín: "#00FF00",
 Flex: 1,
 alignItems: "központ",
 flexDirection: "sor",
 },
 négyzet: {
 háttérszín: "#FF0000",
 szélesség: 98,
 magasság: 98,
 árrés: 4,
 },
});
exportalapértelmezettfunkcióApp() {
Visszatérés (




 </View>
 )
}

Íme az eredmény:

Beállítása a flexDirection nak nek sor-fordított egymás mellé helyezi a gyerekeket, de megfordítja a sorrendet. Hasonlóképpen a oszlop-fordítás a gyerekeket egymásra helyezi, de az által meghatározott sorrenddel ellentétes sorrendben oszlop.

3. JustifyContent használata a React Native alkalmazásban

A justifyContent tulajdonság egy flexbox tároló gyermekelemeit az elsődleges tengely mentén igazítja. Ha a flexDirection be van állítva oszlop, akkor az elsődleges tengely a függőleges tengely. Ha be van állítva sor, akkor vízszintes.

A lehetséges értékei justifyContentvannak flex-start, hajlékony végű, központ, tér-között, tér-körül, és térben egyenletesen.

A következő példában flexDirection sorra van állítva és justifyContentbe van állítva flex-start:

import Reagál tól től"reagál"
import { Stíluslap, Nézet } tól től"react-native"
const styles = StyleSheet.create({
 konténer: {
 háttérszín: "#00FF00",
 Flex: 1,
 justifyContent: "flex-start",
 flexDirection: "sor",
 },
 négyzet: {
 háttérszín: "#FF0000",
 szélesség: 98,
 magasság: 98,
 árrés: 6,
 },
});
exportalapértelmezettfunkcióApp() {
Visszatérés (




 </View>
 )
}

Íme a kimenet:

Ha megváltoztatod a flexDirection nak nek oszlop, flex-start a függőleges tengelyre vonatkozik. Így a dobozok egymásra kerülnek.

Beállítás justifyContent középre (míg az elsődleges tengely a oszlop) középre helyezi a három gyermekdobozt.

4. Az alignItems használata a React Native alkalmazásban

A alignItems tulajdonság határozza meg az elemek elhelyezését egy flexbox tárolóban a másodlagos tengely mentén. Ez az ellenkezője justifyContent. Akárcsak justifyContent gondoskodik a függőleges beállításról, alignItems kezeli a vízszintes igazítást. A lehetséges értékei alignItems vannak flex-start, hajlékony végű, központ, és alapvonal.

A következő példában flexDirection be van állítva sor és alignItemsbe van állítva flex-start:

import Reagál tól től"reagál"
import { Stíluslap, Nézet } tól től"react-native"
const styles = StyleSheet.create({
 konténer: {
 háttérszín: "#00FF00",
 Flex: 1,
 alignItems: "flex-start",
 flexDirection: "sor",
 },
 négyzet: {
 háttérszín: "#FF0000",
 szélesség: 98,
 magasság: 98,
 árrés: 6,
 },
});
exportalapértelmezettfunkcióApp() {
Visszatérés (





 </View>
 )
}

Íme a kimenet:

Ha beállítja a flexDirection tulajdonát oszlop és alignItems nak nek központ, a dobozok egymásra kerülnek, a gyermekelemek pedig középre igazodnak.

5. Az alignSelf használata a React Native alkalmazásban

A alignSelf tulajdonság határozza meg, hogy az egyes gyermekek hogyan igazodjanak el a tárolóban. Felülírja alignItems, és a lehetséges értékek flex-start, hajlékony végű, központ, és alapvonal.

A következő példában alapértelmezést adunk meg alignItems tulajdonságot, és felülírja a használatával alignSelf:

import Reagál tól től"reagál"
import { Stíluslap, Nézet } tól től"react-native"
const styles = StyleSheet.create({
 konténer: {
 háttérszín: "#00FF00",
 Flex: 1,
 alignItems: "központ", 
 justifyContent: "központ", 
 flexDirection: "sor",
 },
 négyzet: {
 háttérszín: "#FF0000",
 szélesség: 98,
 magasság: 98,
 árrés: 6,
 },
});
exportalapértelmezettfunkcióApp() {
Visszatérés (


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

Íme az eredmény:

Egyéb Flexbox tulajdonságok

Két másik tulajdonság is használható, amikor flexbox-elrendezést hoz létre a React Native alkalmazásban:

  • flexWrap: Abban az esetben, ha egy konténer gyermekei túlcsordulnak belőle. Használat flexWrap annak megadásához, hogy egyetlen sorban legyenek-e zsugorítva, vagy több sorba kell csomagolni. A következő lehetséges értékei flexWrap vannak nowrap és betakar.
  • rés: Használja a rés tulajdonság a tárolóban lévő rácselemek közötti hézagok hozzáadásához. Értéke akkora legyen, amekkorát szeretne az elemek között. Megadhatja a rés ingatlan CSS-egységekkel, például px, em vagy rem.

További információ a React Native szolgáltatásról

Most, hogy megértette a flexboxot, és tudja, hogyan kell használni a React Native alkalmazásban rugalmas és érzékeny elrendezések létrehozásához, itt az ideje, hogy belevágjon a React Native finomságaiba.