Jak používat Flexbox v React Native

Flexbox je nástroj CSS, který vám umožňuje vytvářet flexibilní jednorozměrná rozvržení. Umožňuje vám ovládat polohu prvků v kontejneru, takže máte větší kontrolu nad prezentací obsahu na obrazovce.

Tento kurz ukazuje, jak používat flexbox v React Native k vytváření flexibilních a citlivých rozvržení. Dozvíte se, jak umístit podřízené položky prvku kontejneru pomocí vlastností flexboxu.

Porovnání chování Flexboxu v React Native a Web Development

Pokud chcete uspořádat obsah prvku kontejneru pomocí flexboxu v prostém CSS, musíte použít displej: flex vlastnictví.

kontejner { Zobrazit: flex; }

Ale s React Native nemusíte nastavovat displej: flex vlastnictví. Důvodem je skutečnost, že React Native standardně používá flexbox k vytváření rozvržení.

Zde je několik rozdílů, které je třeba mít na paměti jak se flexbox chová při použití k zarovnání prvků HTML ve webových aplikacích oproti tomu, jak se chová v React Native:

• flexDirection výchozí na řádek ve webových aplikacích, ale výchozí je sloupec v React Native.
instagram viewer
• zarovnatObsah výchozí na protáhnout se ve webových aplikacích a flex-start v React Native.
• flexShrink výchozí je 1 na webu a 0 v React Native.

Použití vlastností Flexbox v React Native

Vlastnosti Flexbox vám umožňují popsat, jak zarovnat podřízené prvky prvku kontejneru. Chcete-li vytvořit komplexní rozvržení, která vyhovují potřebám vaší aplikace, musíte těmto vlastnostem porozumět.

1. Použití vlastnosti flex v React Native

The flex vlastnost určuje, jak Pohled komponenta vyplní obrazovku. Tato vlastnost přijímá celočíselnou hodnotu větší nebo rovnou 0. Hodnota určuje zlomek obrazovky Pohled složka by měla zabírat.

V tomto příkladu vytváříte obrazovku s jediným pohledem z React Nativní knihovna komponent:

import Reagovat z"reagovat"
import { StyleSheet, View } z"reakční"
vývoznívýchozífunkceAplikace() {
vrátit se (
 <>
barva pozadí: "#A020F0", flex: 1}} /> 
 </>
 )
}

Zde je výstup:

Zde jste přiřadili 1 jako flex hodnotu Pohled komponent. The Pohled komponenta zabírá celou obrazovku (100 %), protože jste rozdělili prostor do jedné skupiny.

Podívejme se na další příklad:

import Reagovat z"reagovat"
import { StyleSheet, View } z"reakční"
vývoznívýchozífunkceAplikace() {
vrátit se (

barva pozadí: "#A020F0", flex: 1}} />
barva pozadí: "#7cb48f", flex: 3 }} /> 
 </View>
 )
}

Zde je výsledek:

Tady máte dvě Pohled prvky v jiném Pohled živel. První dítě je nastaveno na flex: 1a druhý je nastaven na flex: 3. Tyto hodnoty rozdělují prostor mezi dvě děti. První zabírá 1/4 obrazovky, zatímco druhý zabírá 3/4 obrazovky (Obrazovka je rozdělena na 4 bloky, protože 1+3 = 4).

2. Použití vlastnosti flexDirection v React Native

Pokud se podíváte na výše uvedený snímek obrazovky, uvidíte, že podřízené prvky jsou nad sebou. Toto je výchozí chování flexboxu v React Native (flexDirection výchozí na sloupec hodnota).

Můžete také nastavit flexDirection majetek do řádek, sloupec-reverzní, a řádek-zpět. V následujícím příkladu flexDirection je nastaveno na řádek, proto jsou podřízené prvky umístěny vedle sebe:

import Reagovat z"reagovat"
import { StyleSheet, View } z"reakční"
konst styly = StyleSheet.create({
 kontejner: {
 barva pozadí: "#00FF00",
 flex: 1,
 alignItems: "centrum",
 flexDirection: "řádek",
 },
 náměstí: {
 barva pozadí: "#FF0000",
 šířka: 98,
 výška: 98,
 okraj: 4,
 },
});
vývoznívýchozífunkceAplikace() {
vrátit se (




 </View>
 )
}

Zde je výsledek:

Nastavení flexDirection na řádek-zpět umístí děti vedle sebe, ale obrátí pořadí. Podobně, sloupec-reverzní umístí děti na sebe, ale v opačném pořadí, než jak je definováno sloupec.

3. Použití justifyContent v React Native

The justifyContent vlastnost zarovná podřízené prvky kontejneru flexbox podél primární osy. Pokud flexDirection je nastaveno na sloupec, pak je primární osou svislá osa. Pokud je nastaveno na řádek, pak je horizontální.

Možné hodnoty justifyContentjsou flex-start, ohebný konec, centrum, prostor-mezi, prostor kolem, a prostorově rovnoměrně.

V následujícím příkladu flexDirection je nastaven na řádek a justifyContentje nastaveno na flex-start:

import Reagovat z"reagovat"
import { StyleSheet, View } z"reakční"
konst styly = StyleSheet.create({
 kontejner: {
 barva pozadí: "#00FF00",
 flex: 1,
 justifyContent: "flex-start",
 flexDirection: "řádek",
 },
 náměstí: {
 barva pozadí: "#FF0000",
 šířka: 98,
 výška: 98,
 okraj: 6,
 },
});
vývoznívýchozífunkceAplikace() {
vrátit se (




 </View>
 )
}

Zde je výstup:

Pokud změníte flexDirection na sloupec, flex-start bude platit pro svislou osu. Krabice se tedy budou skládat na sebe.

Nastavení justifyContent do středu (zatímco primární osa je a sloupec) vycentruje tři dětské boxy.

4. Použití alignItems v React Native

The alignItems vlastnost určuje umístění položek v kontejneru flexbox podél sekundární osy. Toto je opak justifyContent. Stejně jako justifyContent stará se o vertikální vyrovnání, alignItems zvládá horizontální zarovnání. Možné hodnoty alignItems jsou flex-start, ohebný konec, centrum, a základní linie.

V následujícím příkladu flexDirection je nastaveno na řádek a alignItemsje nastaveno na flex-start:

import Reagovat z"reagovat"
import { StyleSheet, View } z"reakční"
konst styly = StyleSheet.create({
 kontejner: {
 barva pozadí: "#00FF00",
 flex: 1,
 alignItems: "flex-start",
 flexDirection: "řádek",
 },
 náměstí: {
 barva pozadí: "#FF0000",
 šířka: 98,
 výška: 98,
 okraj: 6,
 },
});
vývoznívýchozífunkceAplikace() {
vrátit se (





 </View>
 )
}

Zde je výstup:

Pokud nastavíte flexDirection majetek do sloupec a alignItems na centrum, rámečky budou umístěny na sebe a podřízené prvky budou zarovnány na střed.

5. Použití alignSelf v React Native

The alignSelf vlastnost určuje, jak by se měl jednotlivý podřízený prvek zarovnat v kontejneru. Přepíše to alignItemsa možné hodnoty jsou flex-start, ohebný konec, centrum, a základní linie.

V následujícím příkladu nastavíme výchozí alignItems vlastnost a přepsat ji pomocí alignSelf:

import Reagovat z"reagovat"
import { StyleSheet, View } z"reakční"
konst styly = StyleSheet.create({
 kontejner: {
 barva pozadí: "#00FF00",
 flex: 1,
 alignItems: "centrum", 
 justifyContent: "centrum", 
 flexDirection: "řádek",
 },
 náměstí: {
 barva pozadí: "#FF0000",
 šířka: 98,
 výška: 98,
 okraj: 6,
 },
});
vývoznívýchozífunkceAplikace() {
vrátit se (


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

Zde je výsledek:

Další vlastnosti Flexbox

Existují dvě další vlastnosti, které můžete použít při vytváření rozvržení flexbox v React Native:

• flexWrap: Pro případ, že by děti kontejneru přetekly. Použití flexWrap určit, zda mají být zmenšeny na jeden řádek nebo zabaleny do více řádků. Možné hodnoty pro flexWrap jsou nowrap a zabalit.
• mezera: Používáte mezera vlastnost přidat mezery mezi položky mřížky v kontejneru. Jeho hodnota by měla být velikost mezery, kterou chcete mezi položkami. Můžete určit mezera vlastnictví pomocí jednotek CSS jako px, em nebo rem.

Zjistěte více o React Native

Nyní, když rozumíte flexboxu a víte, jak jej používat ve své aplikaci React Native k vytváření flexibilních a responzivních rozvržení, je čas, abyste se pustili do toho pravého React Native.