Maak gebruik van flexbox om flexibele en responsieve lay-outs te bouwen in React Native.
Flexbox is een CSS-tool waarmee u flexibele eendimensionale lay-outs kunt bouwen. Hiermee kunt u de positie van elementen in een container bepalen, zodat u meer controle heeft over de presentatie van uw inhoud op het scherm.
Deze tutorial laat zien hoe je flexbox in React Native kunt gebruiken om flexibele en responsieve lay-outs te bouwen. U leert hoe u onderliggende items van een containerelement positioneert met behulp van flexbox-eigenschappen.
Flexbox-gedrag vergelijken in React Native en webontwikkeling
Als u de inhoud van het containerelement wilt ordenen met behulp van flexbox in gewone CSS, moet u de weergave: flex eigendom.
container { weergave: buigen; }Maar met React Native hoef je de weergave: flex eigendom. Dit komt omdat React Native standaard flexbox gebruikt om lay-outs te bouwen.
Hier zijn enkele verschillen waarmee u rekening moet houden hoe flexbox zich gedraagt wanneer het wordt gebruikt om HTML-elementen uit te lijnen
in web-apps versus hoe het zich gedraagt in React Native:- flexDirection standaard naar rij in webapplicaties, maar is standaard ingesteld op kolom in Native reageren.
- alignContent standaard naar rekken in webapplicaties en flex-start in Native reageren.
- flexShrink standaard ingesteld op 1 in web en 0 in React Native.
Flexbox-eigenschappen gebruiken in React Native
Met Flexbox-eigenschappen kunt u beschrijven hoe de onderliggende elementen van het containerelement moeten worden uitgelijnd. U moet deze eigenschappen begrijpen om complexe lay-outs te maken die passen bij de behoeften van uw toepassing.
1. De eigenschap flex gebruiken in React Native
De buigen eigenschap bepaalt hoe de Weergave onderdeel vult het scherm. Deze eigenschap accepteert een geheel getal groter dan of gelijk aan 0. De waarde geeft de fractie van het scherm aan Weergave onderdeel moet opnemen.
In dit voorbeeld maakt u een scherm met een enkele weergave van de Reageer Native componentenbibliotheek:
importeren Reageer van"Reageer"
importeren { StyleSheet, Bekijken } van"reageren-native"
exporterenstandaardfunctieapp() {
opbrengst (
<>achtergrondkleur: "#A020F0", buigen: 1}} />
</>
)
}
Dit is de uitvoer:
Hier heb je de 1 toegewezen als de flexwaarde van de Weergave bestanddeel. De Weergave component neemt het hele scherm in beslag (100%) omdat je de ruimte in één groep hebt opgesplitst.
Laten we een ander voorbeeld bekijken:
importeren Reageer van"Reageer"
importeren { StyleSheet, Bekijken } van"reageren-native"
exporterenstandaardfunctieapp() {
opbrengst (achtergrondkleur: "#A020F0", buigen: 1}} /> Achtergrond kleur: "#7cb48f", buigen: 3 }} />
</View>
)
}
Dit is het resultaat:
Hier heb je er twee Weergave elementen in een ander Weergave element. Het eerste kind is ingesteld op flex: 1, en de tweede is ingesteld op flex: 3. Die waarden verdelen de ruimte tussen de twee kinderen. De eerste neemt 1/4 van het scherm in beslag terwijl de tweede 3/4 van het scherm in beslag neemt (het scherm is opgesplitst in 4 blokken omdat 1+3 = 4).
2. De eigenschap flexDirection gebruiken in React Native
Als je naar de bovenstaande schermafbeelding kijkt, zie je dat de onderliggende elementen boven op elkaar staan. Dit is het standaardgedrag van flexbox in React Native (flexDirection staat standaard op de kolom waarde).
U kunt ook de flexDirection eigendom aan rij, kolom-omgekeerd, En rij-omgekeerd. In het volgende voorbeeld flexDirection ingesteld op rij, daarom worden de onderliggende elementen naast elkaar geplaatst:
importeren Reageer van"Reageer"
importeren { StyleSheet, Bekijken } van"reageren-native"const stijlen = StyleSheet.create({
houder: {
Achtergrond kleur: "#00FF00",
buigen: 1,
uitlijnenItems: "centrum",
flexDirection: "rij",
},
vierkant: {
Achtergrond kleur: "#FF0000",
breedte: 98,
hoogte: 98,
marge: 4,
},
});
exporterenstandaardfunctieapp() {
opbrengst (
</View>
)
}
Dit is het resultaat:
Het instellen van de flexDirection naar rij-omgekeerd plaatst de kinderen naast elkaar, maar keert de volgorde om. Evenzo de kolom-omgekeerd plaatst de kinderen boven op elkaar, maar in de tegenovergestelde volgorde van die gedefinieerd door de kolom.
3. RechtvaardigContent gebruiken in React Native
De rechtvaardigenInhoud eigenschap lijnt de onderliggende elementen van een flexbox-container uit langs de primaire as. Als de flexDirection ingesteld op kolom, dan is de primaire as de verticale as. Als het is ingesteld op rij, dan is het horizontaal.
De mogelijke waarden van rechtvaardigenInhoudZijn flex-start, flex-einde, centrum, ruimte tussen, ruimte-rond, En ruimte-gelijkmatig.
In het volgende voorbeeld flexDirection is ingesteld op rij en rechtvaardigenInhoudingesteld op flex-start:
importeren Reageer van"Reageer"
importeren { StyleSheet, Bekijken } van"reageren-native"const stijlen = StyleSheet.create({
houder: {
Achtergrond kleur: "#00FF00",
buigen: 1,
rechtvaardigenInhoud: "flex start",
flexDirection: "rij",
},
vierkant: {
Achtergrond kleur: "#FF0000",
breedte: 98,
hoogte: 98,
marge: 6,
},
});
exporterenstandaardfunctieapp() {
opbrengst (
</View>
)
}
Dit is de uitvoer:
Als u de flexDirection naar kolom, flex-start is van toepassing op de verticale as. De dozen worden dus op elkaar gestapeld.
Instelling rechtvaardigenInhoud naar het midden (terwijl de primaire as een kolom) centreert de drie kinderboxen.
4. alignItems gebruiken in React Native
De alignItems eigenschap bepaalt de plaatsing van items in een flexbox-container langs de secundaire as. Dit is het tegenovergestelde van rechtvaardigenInhoud. Net als rechtvaardigenInhoud zorgt voor de verticale uitlijning, alignItems zorgt voor horizontale uitlijning. De mogelijke waarden van alignItems Zijn flex-start, flex-einde, centrum, En basislijn.
In het volgende voorbeeld flexDirection ingesteld op rij En alignItemsingesteld op flex-start:
importeren Reageer van"Reageer"
importeren { StyleSheet, Bekijken } van"reageren-native"const stijlen = StyleSheet.create({
houder: {
Achtergrond kleur: "#00FF00",
buigen: 1,
uitlijnenItems: "flex start",
flexDirection: "rij",
},
vierkant: {
Achtergrond kleur: "#FF0000",
breedte: 98,
hoogte: 98,
marge: 6,
},
});
exporterenstandaardfunctieapp() {
opbrengst (
</View>
)
}
Dit is de uitvoer:
Als u de flexDirection eigendom aan kolom En alignItems naar centrum, worden de vakken op elkaar geplaatst en worden de onderliggende elementen in het midden uitgelijnd.
5. alignSelf gebruiken in React Native
De uitlijnenZelf eigenschap bepaalt hoe een individueel kind zich in de container moet uitlijnen. Het overschrijft alignItems, en de mogelijke waarden zijn flex-start, flex-einde, centrum, En basislijn.
In het volgende voorbeeld stellen we een standaard in alignItems eigenschap en overschrijf deze met behulp van uitlijnenZelf:
importeren Reageer van"Reageer"
importeren { StyleSheet, Bekijken } van"reageren-native"const stijlen = StyleSheet.create({
houder: {
Achtergrond kleur: "#00FF00",
buigen: 1,
uitlijnenItems: "centrum",
rechtvaardigenInhoud: "centrum",
flexDirection: "rij",
},
vierkant: {
Achtergrond kleur: "#FF0000",
breedte: 98,
hoogte: 98,
marge: 6,
},
});
exporterenstandaardfunctieapp() {
opbrengst (uitlijnenZelf: "flex-end" }]} /> uitlijnenZelf: "flex start" }]} />
)
}
Dit is het resultaat:
Andere Flexbox-eigenschappen
Er zijn twee andere eigenschappen die u kunt gebruiken bij het maken van een flexbox-lay-out in React Native:
- flexWrap: Voor het geval de kinderen van een container eruit lopen. Gebruik flexWrap om aan te geven of ze op een enkele regel moeten worden verkleind of in meerdere regels moeten worden verpakt. Mogelijke waarden voor flexWrap Zijn nurap En wrap.
- gat: U gebruikt de gat eigenschap om openingen toe te voegen tussen de rasteritems in de container. De waarde moet de grootte zijn van de opening die u tussen de items wilt. U kunt de gat eigendom met behulp van CSS-eenheden zoals px, em of rem.
Meer informatie over React Native
Nu je flexbox begrijpt en weet hoe je het in je React Native-app moet gebruiken om flexibele en responsieve lay-outs te maken, is het tijd om in te gaan op de kern van React Native.
