Använd flexbox för att bygga flexibla och responsiva layouter i React Native.
Flexbox är ett CSS-verktyg som låter dig bygga flexibla endimensionella layouter. Det gör att du kan styra positionen för element i en behållare så att du har mer kontroll över att presentera ditt innehåll på skärmen.
Denna handledning visar hur man använder flexbox i React Native för att bygga flexibla och responsiva layouter. Du lär dig hur du placerar underordnade objekt till ett containerelement med hjälp av flexbox-egenskaper.
Jämför Flexbox-beteende i React Native och webbutveckling
Om du vill organisera containerelementets innehåll med flexbox i vanlig CSS, måste du använda display: flex fast egendom.
behållare { visa: flexa; }Men med React Native behöver du inte ställa in display: flex fast egendom. Detta beror på att React Native använder flexbox som standard för att bygga layouter.
Här är några skillnader att tänka på hur flexbox beter sig när den används för att justera HTML-element i webbappar kontra hur det beter sig i React Native:
- flexDirection standard till rad i webbapplikationer men är standard till kolumn i React Native.
- alignContent standard till sträcka i webbapplikationer och flex-start i React Native.
- flexShrink standard till 1 i webben och 0 i React Native.
Använda Flexbox-egenskaper i React Native
Flexbox-egenskaper låter dig beskriva hur du justerar behållarelementets underordnade element. Du måste förstå dessa egenskaper för att skapa komplexa layouter som passar din applikations behov.
1. Använda flex-egenskapen i React Native
De böja egendom avgör hur Se komponent fyller skärmen. Den här egenskapen accepterar ett heltalsvärde som är större än eller lika med 0. Värdet anger bråkdelen av skärmen Se komponent bör ta upp.
I det här exemplet skapar du en skärm med en enda vy från React Native-komponentbibliotek:
importera Reagera från"reagera"
importera { StyleSheet, View } från"reagera-native"
exporterastandardfungeraApp() {
lämna tillbaka (
<>bakgrundsfärg: "#A020F0", böja: 1}} />
</>
)
}
Här är utgången:
Här tilldelade du 1:an som flexvärdet för Se komponent. De Se komponenten tar upp hela skärmen (100 %) eftersom du har delat upp utrymmet i en grupp.
Låt oss ta en titt på ett annat exempel:
importera Reagera från"reagera"
importera { StyleSheet, View } från"reagera-native"
exporterastandardfungeraApp() {
lämna tillbaka (bakgrundsfärg: "#A020F0", böja: 1}} /> bakgrundsfärg: "#7cb48f", böja: 3 }} />
</View>
)
}
Här är resultatet:
Här har du två Se element inom en annan Se element. Det första barnet är inställt på flex: 1, och den andra är inställd på flex: 3. Dessa värden delar upp utrymmet mellan de två barnen. Den första tar upp 1/4 av skärmen medan den andra tar upp 3/4 av skärmen (skärmen är uppdelad i 4 block eftersom 1+3 = 4).
2. Använda flexDirection-egenskapen i React Native
Om du tittar på skärmdumpen ovan ser du att de underordnade elementen ligger ovanpå varandra. Detta är standardbeteendet för flexbox i React Native (flexDirection är standard på kolumn värde).
Du kan också ställa in flexDirection egendom till rad, kolumn-omvänd, och rad-omvänd. I följande exempel, flexDirection är satt till rad, därför placeras de underordnade elementen sida vid sida:
importera Reagera från"reagera"
importera { StyleSheet, View } från"reagera-native"konst styles = StyleSheet.create({
behållare: {
bakgrundsfärg: "#00FF00",
böja: 1,
alignItems: "Centrum",
flexDirection: "rad",
},
kvadrat: {
bakgrundsfärg: "#FF0000",
bredd: 98,
höjd: 98,
marginal: 4,
},
});
exporterastandardfungeraApp() {
lämna tillbaka (
</View>
)
}
Här är resultatet:
Ställa in flexDirection till rad-omvänd placerar barnen sida vid sida, men det vänder på ordningen. På samma sätt kolumn-omvänd placerar barnen ovanpå varandra men i motsatt ordning till den som definieras av kolumn.
3. Använder justifyContent i React Native
De motivera innehåll egenskap justerar de underordnade elementen i en flexbox-behållare längs den primära axeln. Om flexDirection är satt till kolumn, då är primäraxeln den vertikala axeln. Om den är inställd på rad, då är det horisontellt.
De möjliga värdena för motivera innehållär flex-start, flex-ände, Centrum, mellanslag, utrymme runt, och utrymmet jämnt.
I följande exempel, flexDirection är inställd på rad och motivera innehållär satt till flex-start:
importera Reagera från"reagera"
importera { StyleSheet, View } från"reagera-native"konst styles = StyleSheet.create({
behållare: {
bakgrundsfärg: "#00FF00",
böja: 1,
justifyContent: "flex-start",
flexDirection: "rad",
},
kvadrat: {
bakgrundsfärg: "#FF0000",
bredd: 98,
höjd: 98,
marginal: 6,
},
});
exporterastandardfungeraApp() {
lämna tillbaka (
</View>
)
}
Här är utgången:
Om du ändrar flexDirection till kolumn, flex-start kommer att gälla för den vertikala axeln. Så lådorna kommer att staplas ovanpå varandra.
Miljö motivera innehåll att centrera (medan primäraxeln är a kolumn) centrerar de tre barnrutorna.
4. Använda alignItems i React Native
De alignItems egenskapen bestämmer placeringen av föremål i en flexbox-behållare längs den sekundära axeln. Detta är motsatsen till motivera innehåll. Precis som motivera innehåll tar hand om den vertikala inriktningen, alignItems hanterar horisontell inriktning. De möjliga värdena för alignItems är flex-start, flex-ände, Centrum, och baslinje.
I följande exempel, flexDirection är satt till rad och alignItemsär satt till flex-start:
importera Reagera från"reagera"
importera { StyleSheet, View } från"reagera-native"konst styles = StyleSheet.create({
behållare: {
bakgrundsfärg: "#00FF00",
böja: 1,
alignItems: "flex-start",
flexDirection: "rad",
},
kvadrat: {
bakgrundsfärg: "#FF0000",
bredd: 98,
höjd: 98,
marginal: 6,
},
});
exporterastandardfungeraApp() {
lämna tillbaka (
</View>
)
}
Här är utgången:
Om du ställer in flexDirection egendom till kolumn och alignItems till Centrum, kommer rutorna att placeras ovanpå varandra och barnelementen kommer att mittjusteras.
5. Använder alignSelf i React Native
De alignSelf egenskapen avgör hur ett enskilt barn ska anpassa sig i behållaren. Det åsidosätter alignItems, och de möjliga värdena är flex-start, flex-ände, Centrum, och baslinje.
I följande exempel anger vi en standard alignItems egendom och åsidosätta den med hjälp av alignSelf:
importera Reagera från"reagera"
importera { StyleSheet, View } från"reagera-native"konst styles = StyleSheet.create({
behållare: {
bakgrundsfärg: "#00FF00",
böja: 1,
alignItems: "Centrum",
justifyContent: "Centrum",
flexDirection: "rad",
},
kvadrat: {
bakgrundsfärg: "#FF0000",
bredd: 98,
höjd: 98,
marginal: 6,
},
});
exporterastandardfungeraApp() {
lämna tillbaka (alignSelf: "flex-end" }]} /> alignSelf: "flex-start" }]} />
)
}
Här är resultatet:
Andra Flexbox-egenskaper
Det finns två andra egenskaper som du kan använda när du skapar en flexbox-layout i React Native:
- flexWrap: Om barnen i en behållare svämmar över ur den. Använda sig av flexWrap för att ange om de ska krympas på en enda rad eller lindas in i flera rader. Möjliga värden för flexWrap är nurap och slå in.
- glipa: Du använder glipa egenskap för att lägga till luckor mellan rutnätsobjekten i behållaren. Dess värde bör vara storleken på gapet du vill ha mellan objekten. Du kan ange glipa fast egendom med CSS-enheter som px, em eller rem.
Lär dig mer om React Native
Nu när du förstår flexbox och vet hur du använder den i din React Native-app för att skapa flexibla och lyhörda layouter, är det dags för dig att gå in på det rena React Native.
