Jak korzystać z Flexboksa w React Native

Flexbox to narzędzie CSS, które pozwala tworzyć elastyczne, jednowymiarowe układy. Pozwala kontrolować położenie elementów w kontenerze, dzięki czemu masz większą kontrolę nad prezentacją treści na ekranie.

Ten samouczek pokazuje, jak używać Flexbox w React Native do tworzenia elastycznych i responsywnych układów. Dowiesz się, jak pozycjonować elementy podrzędne elementu kontenera za pomocą właściwości flexbox.

Porównanie zachowania Flexbox w React Native i Web Development

Jeśli chcesz uporządkować zawartość elementu kontenera za pomocą flexbox w zwykłym CSS, musisz użyć metody wyświetlacz: elastyczny nieruchomość.

pojemnik { wyświetlacz: przewód; }

Ale z React Native nie musisz ustawiać wyświetlacz: elastyczny nieruchomość. Dzieje się tak, ponieważ React Native domyślnie używa flexboksa do budowania układów.

Oto kilka różnic, o których warto pamiętać jak flexbox zachowuje się, gdy jest używany do wyrównywania elementów HTML w aplikacjach internetowych a jak zachowuje się w React Native:

• flexKierunek domyślnie wiersz w aplikacjach internetowych, ale domyślnie kolumna w React Native.
• wyrównaj zawartość domyślnie rozciągać się w aplikacjach internetowych i elastyczny start w React Native.
• flexshrink domyślnie 1 w web i 0 w React Native.

Używanie właściwości Flexbox w React Native

Właściwości Flexbox umożliwiają opisanie sposobu wyrównania elementów podrzędnych elementu kontenera. Musisz zrozumieć te właściwości, aby tworzyć złożone układy, które pasują do potrzeb Twojej aplikacji.

1. Używanie właściwości flex w React Native

The przewód właściwość określa, w jaki sposób Pogląd element wypełnia ekran. Ta właściwość akceptuje wartość całkowitą większą lub równą 0. Wartość określa ułamek ekranu Pogląd składnik powinien zająć.

W tym przykładzie tworzysz ekran z pojedynczym widokiem z Biblioteka komponentów React Native:

import Reagować z"reagować"
import { Arkusz stylów, widok } z„reaguj natywnie”
eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (
 <>
Kolor tła: "#A020F0", przewód: 1}} /> 
 </>
 )
}

Oto dane wyjściowe:

Tutaj przypisałeś 1 jako wartość flex dla Pogląd część. The Pogląd komponent zajmuje cały ekran (100%), ponieważ podzieliłeś przestrzeń na jedną grupę.

Spójrzmy na inny przykład:

import Reagować z"reagować"
import { Arkusz stylów, widok } z„reaguj natywnie”
eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (

Kolor tła: "#A020F0", przewód: 1}} />
kolor tła: „#7cb48f”, przewód: 3 }} /> 
 </View>
 )
}

Oto wynik:

Tutaj masz dwa Pogląd elementy w innym Pogląd element. Pierwsze dziecko jest ustawione na elastyczność: 1, a drugi jest ustawiony na elastyczność: 3. Te wartości dzielą przestrzeń między dwoje dzieci. Pierwszy zajmuje 1/4 ekranu, a drugi 3/4 ekranu (ekran jest podzielony na 4 bloki, ponieważ 1 + 3 = 4).

2. Używanie właściwości flexDirection w React Native

Jeśli spojrzysz na powyższy zrzut ekranu, zobaczysz, że elementy podrzędne znajdują się jeden na drugim. Jest to domyślne zachowanie flexboksa w React Native (flexKierunek domyślnie do kolumna wartość).

Możesz także ustawić flexKierunek nieruchomość do wiersz, kolumna odwrócona, I odwrotny rząd. W poniższym przykładzie flexKierunek jest ustawione na wiersz, dlatego elementy potomne są umieszczane obok siebie:

import Reagować z"reagować"
import { Arkusz stylów, widok } z„reaguj natywnie”
konst style = StyleSheet.create({
 pojemnik: {
 kolor tła: „#00FF00”,
 przewód: 1,
 elementy wyrównania: "Centrum",
 flexKierunek: "wiersz",
 },
 kwadrat: {
 kolor tła: "#FF0000",
 szerokość: 98,
 wysokość: 98,
 margines: 4,
 },
});
eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (




 </View>
 )
}

Oto wynik:

Ustawianie flexKierunek Do odwrotny rząd umieszcza dzieci obok siebie, ale odwraca kolejność. Podobnie, kolumna odwrócona umieszcza dzieci jedno na drugim, ale w kolejności odwrotnej do określonej przez kolumna.

3. Używanie justifyContent w React Native

The uzasadnij treść właściwość wyrównuje elementy potomne kontenera Flexbox wzdłuż osi głównej. jeśli flexKierunek jest ustawione na kolumna, to główną osią jest oś pionowa. Jeśli jest ustawiony na wiersz, wtedy jest poziomo.

Możliwe wartości uzasadnij treśćCzy elastyczny start, elastyczny koniec, Centrum, przestrzeń pomiędzy, przestrzenny, I równomiernie.

W poniższym przykładzie flexKierunek jest ustawiony na wiersz i uzasadnij treśćjest ustawione na elastyczny start:

import Reagować z"reagować"
import { Arkusz stylów, widok } z„reaguj natywnie”
konst style = StyleSheet.create({
 pojemnik: {
 kolor tła: „#00FF00”,
 przewód: 1,
 uzasadnij Treść: „elastyczny start”,
 flexKierunek: "wiersz",
 },
 kwadrat: {
 kolor tła: "#FF0000",
 szerokość: 98,
 wysokość: 98,
 margines: 6,
 },
});
eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (




 </View>
 )
}

Oto dane wyjściowe:

Jeśli zmienisz flexKierunek Do kolumna, elastyczny start będzie dotyczyć osi pionowej. Tak więc pudełka będą układane jeden na drugim.

Ustawienie uzasadnij treść do środka (podczas gdy główną osią jest a kolumna) wyśrodkowuje trzy pola podrzędne.

4. Używanie alignItems w React Native

The wyrównaj elementy właściwość określa położenie elementów w kontenerze Flexbox wzdłuż osi pomocniczej. To jest przeciwieństwo uzasadnij treść. Tak jak uzasadnij treść dba o wyrównanie w pionie, wyrównaj elementy obsługuje wyrównanie w poziomie. Możliwe wartości wyrównaj elementy Czy elastyczny start, elastyczny koniec, Centrum, I linia bazowa.

W poniższym przykładzie flexKierunek jest ustawione na wiersz I wyrównaj elementyjest ustawione na elastyczny start:

import Reagować z"reagować"
import { Arkusz stylów, widok } z„reaguj natywnie”
konst style = StyleSheet.create({
 pojemnik: {
 kolor tła: „#00FF00”,
 przewód: 1,
 elementy wyrównania: „elastyczny start”,
 flexKierunek: "wiersz",
 },
 kwadrat: {
 kolor tła: "#FF0000",
 szerokość: 98,
 wysokość: 98,
 margines: 6,
 },
});
eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (





 </View>
 )
}

Oto dane wyjściowe:

Jeśli ustawisz flexKierunek nieruchomość do kolumna I wyrównaj elementy Do Centrum, pola zostaną umieszczone jedno na drugim, a elementy podrzędne zostaną wyrównane do środka.

5. Używanie alignSelf w React Native

The wyrównaj siebie właściwość określa, w jaki sposób poszczególne elementy podrzędne powinny być wyrównane w kontenerze. To zastępuje wyrównaj elementy, a możliwe wartości to elastyczny start, elastyczny koniec, Centrum, I linia bazowa.

W poniższym przykładzie ustawiliśmy wartość domyślną wyrównaj elementy właściwość i zastąpić ją za pomocą wyrównaj siebie:

import Reagować z"reagować"
import { Arkusz stylów, widok } z„reaguj natywnie”
konst style = StyleSheet.create({
 pojemnik: {
 kolor tła: „#00FF00”,
 przewód: 1,
 elementy wyrównania: "Centrum", 
 uzasadnij Treść: "Centrum", 
 flexKierunek: "wiersz",
 },
 kwadrat: {
 kolor tła: "#FF0000",
 szerokość: 98,
 wysokość: 98,
 margines: 6,
 },
});
eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (


wyrównaj siebie: „elastyczny koniec” }]} />
wyrównaj siebie: „elastyczny start” }]} /> 
 )
}

Oto wynik:

Inne właściwości Flexboksa

Istnieją dwie inne właściwości, których możesz użyć podczas tworzenia układu Flexbox w React Native:

• flexWrap: W przypadku, gdy dzieci z pojemnika się przepełnią. Używać flexWrap aby określić, czy powinny być zmniejszone w jednym wierszu, czy zawinięte w wiele wierszy. Możliwe wartości dla flexWrap Czy nowrap I zawinąć.
• luka: Używasz luka właściwość, aby dodać odstępy między elementami siatki w kontenerze. Jego wartość powinna być wielkością żądanej przerwy między elementami. Możesz określić luka nieruchomość używając jednostek CSS, takich jak px, em lub rem.

Dowiedz się więcej o React Native

Teraz, gdy rozumiesz flexbox i wiesz, jak używać go w swojej aplikacji React Native do tworzenia elastycznych i responsywnych układów, nadszedł czas, aby przejść do sedna React Native.