Właściwości układu

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

informacja

Bardziej szczegółowe przykłady dotyczące tych właściwości znajdziesz na stronie Układ z Flexbox.

Przykład

Poniższy przykład pokazuje, jak różne właściwości mogą wpływać na kształtowanie układu w React Native. Możesz na przykład dodawać lub usuwać kwadraty z interfejsu, zmieniając wartości właściwości flexWrap.

TypeScript

JavaScript

---

Dokumentacja

Właściwości

alignContent

alignContent kontroluje, jak wiersze są wyrównywane w kierunku poprzecznym, nadpisując alignContent rodzica.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly')	No

---

alignItems

alignItems wyrównuje elementy potomne w kierunku poprzecznym. Na przykład, gdy elementy są rozmieszczone pionowo, alignItems kontroluje ich wyrównanie w poziomie. Działa jak align-items w CSS (domyślnie: stretch).

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')	No

---

alignSelf

alignSelf kontroluje, jak element potomny jest wyrównywany w kierunku poprzecznym, nadpisując alignItems rodzica. Działa jak align-self w CSS (domyślnie: auto).

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')	No

---

aspectRatio

Współczynnik proporcji kontroluje rozmiar niezdefiniowanego wymiaru węzła.

• Dla węzła o ustalonej szerokości/wysokości współczynnik proporcji kontroluje rozmiar niezdefiniowanego wymiaru

• Dla węzła o ustalonym flex basis współczynnik proporcji kontroluje rozmiar węzła w osi poprzecznej, jeśli nie jest zdefiniowany

• Dla węzła z funkcją pomiaru współczynnik proporcji działa tak, jakby funkcja pomiaru mierzyła flex basis

• Dla węzła z flex grow/shrink współczynnik proporcji kontroluje rozmiar węzła w osi poprzecznej, jeśli nie jest zdefiniowany

• Współczynnik proporcji uwzględnia minimalne/maksymalne wymiary

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

borderBottomWidth

borderBottomWidth działa jak border-bottom-width w CSS.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number	No

---

borderEndWidth

Gdy kierunek to ltr, borderEndWidth jest równoważne borderRightWidth. Gdy kierunek to rtl, borderEndWidth jest równoważne borderLeftWidth.

Type	Required
number	No

---

borderLeftWidth

borderLeftWidth działa jak border-left-width w CSS.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number	No

---

borderRightWidth

borderRightWidth działa jak border-right-width w CSS.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number	No

---

borderStartWidth

Gdy kierunek to ltr, borderStartWidth jest równoważne borderLeftWidth. Gdy kierunek to rtl, borderStartWidth jest równoważne borderRightWidth.

Type	Required
number	No

---

borderTopWidth

borderTopWidth działa jak border-top-width w CSS.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number	No

---

borderWidth

borderWidth działa jak border-width w CSS.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number	No

---

bottom

bottom określa przesunięcie dolnej krawędzi tego komponentu w pikselach logicznych.

Działa podobnie jak bottom w CSS, ale w React Native musisz używać punktów lub procentów. Jednostki takie jak em nie są obsługiwane.

Zobacz dokumentację MDN CSS, aby dowiedzieć się więcej, jak bottom wpływa na układ.

Type	Required
number, string	No

---

boxSizing

boxSizing definiuje sposób obliczania różnych właściwości rozmiaru elementu (width, height, minWidth, minHeight, itd.). Jeśli boxSizing ma wartość border-box, te rozmiary odnoszą się do obramowania elementu. Jeśli content-box — do jego zawartości. Wartość domyślna to border-box. Dokumentacja webowa to dobre źródło informacji, jeśli chcesz dowiedzieć się więcej o działaniu tej właściwości.

Type	Required
enum('border-box', 'content-box')	No

---

columnGap

columnGap działa jak column-gap w CSS. W React Native obsługiwane są tylko jednostki pikselowe.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number	No

---

direction

direction określa kierunkowy przepływ interfejsu. Domyślnie jest inherit, z wyjątkiem węzła głównego, który przyjmuje wartość na podstawie bieżącej lokalizacji.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
enum('inherit', 'ltr', 'rtl')	No

---

display

display ustawia typ wyświetlania komponentu.

Działa podobnie jak display w CSS, ale obsługuje tylko wartości 'flex', 'none' oraz 'contents'. Wartość domyślna to flex.

Type	Required
enum('none', 'flex', 'contents')	No

---

end

Gdy kierunek to ltr, end odpowiada right. Gdy kierunek to rtl, end odpowiada left.

Ten styl ma pierwszeństwo przed stylami left i right.

Type	Required
number, string	No

---

flex

W React Native flex działa inaczej niż w CSS. flex jest liczbą, a nie ciągiem znaków, i funkcjonuje zgodnie z silnikiem układu Yoga.

Gdy flex jest liczbą dodatnią, komponent staje się elastyczny, a jego rozmiar jest proporcjonalny do wartości flex. Komponent z flex ustawionym na 2 zajmie dwa razy więcej miejsca niż komponent z flex równym 1. flex: <positive number> odpowiada flexGrow: <positive number>, flexShrink: 1, flexBasis: 0.

Gdy flex ma wartość 0, komponent jest rozmiarowany zgodnie z width i height i jest nieelastyczny.

Gdy flex ma wartość -1, komponent jest zwykle rozmiarowany zgodnie z width i height. Jednak jeśli zabraknie miejsca, komponent zmniejszy się do swoich minWidth i minHeight.

flexGrow, flexShrink i flexBasis działają tak samo jak w CSS.

Type	Required
number	No

---

flexBasis

flexBasis to niezależny od osi sposób określania domyślnego rozmiaru elementu wzdłuż osi głównej. Ustawienie flexBasis dziecka przypomina ustawienie jego width (gdy rodzic ma flexDirection: row) lub height (gdy rodzic ma flexDirection: column). flexBasis to rozmiar początkowy elementu, zanim zostaną zastosowane obliczenia flexGrow i flexShrink.

Type	Required
number, string	No

---

flexDirection

flexDirection kontroluje kierunek układania elementów potomnych w kontenerze. row układa od lewej do prawej, column od góry do dołu, a pozostałe dwa kierunki łatwo odgadnąć. Działa jak flex-direction w CSS, z tą różnicą, że wartością domyślną jest column.

Więcej szczegółów znajdziesz w dokumentacji MDN CSS.

Type	Required
enum('row', 'row-reverse', 'column', 'column-reverse')	No

---

flexGrow

flexGrow określa, jak dostępna przestrzeń w kontenerze ma być rozdzielana między elementy potomne wzdłuż osi głównej. Po rozmieszczeniu dzieci kontener rozdzieli pozostałe miejsce proporcjonalnie do wartości flex grow poszczególnych elementów.

flexGrow przyjmuje wartości zmiennoprzecinkowe >= 0, gdzie 0 jest wartością domyślną. Kontener rozdzieli pozostałe miejsce między dzieci proporcjonalnie do ich wartości flexGrow.

Type	Required
number	No

---

flexShrink

flexShrink określa, jak elementy potomne mają się zmniejszać wzdłuż osi głównej, gdy ich łączny rozmiar przekroczy rozmiar kontenera. flexShrink działa bardzo podobnie do flexGrow, traktując nadmiarową przestrzeń jako ujemną wartość do rozdysponowania. Obie właściwości dobrze współpracują, pozwalając elementom odpowiednio rosnąć i zmniejszać się.

flexShrink przyjmuje wartości zmiennoprzecinkowe >= 0, gdzie 0 jest wartością domyślną. Kontener zmniejszy swoje elementy potomne proporcjonalnie do ich wartości flexShrink.

Type	Required
number	No

---

flexWrap

flexWrap kontroluje, czy elementy potomne mogą przechodzić do nowej linii po zapełnieniu kontenera. Działa jak flex-wrap w CSS (domyślnie: nowrap).

Uwaga: nie działa już z alignItems: stretch (wartością domyślną), dlatego warto np. użyć alignItems: flex-start (szczegóły zmiany łamiącej: https://github.com/facebook/react-native/releases/tag/v0.28.0).

Więcej szczegółów znajdziesz w dokumentacji MDN CSS.

Type	Required
enum('wrap', 'nowrap', 'wrap-reverse')	No

---

gap

gap działa jak gap w CSS. W React Native obsługiwane są tylko jednostki pikselowe.

Więcej szczegółów znajdziesz w dokumentacji MDN CSS.

Type	Required
number	No

---

height

height ustawia wysokość komponentu.

Działa podobnie jak height w CSS, ale w React Native należy używać punktów lub procentów. Jednostki takie jak em nie są obsługiwane.

Więcej szczegółów znajdziesz w dokumentacji MDN CSS.

Type	Required
number, string	No

---

inset

uwaga

inset jest dostępne tylko w Nowej Architekturze

Ustawienie inset ma ten sam efekt, co ustawienie właściwości top, bottom, right i left.

Więcej szczegółów znajdziesz w dokumentacji MDN CSS.

Type	Required
number, string	No

---

insetBlock

uwaga

insetBlock jest dostępne tylko w Nowej Architekturze

Odpowiednik top i bottom.

Więcej szczegółów znajdziesz w dokumentacji MDN CSS.

Type	Required
number, string	No

---

insetBlockEnd

uwaga

insetBlockEnd jest dostępne tylko w Nowej Architekturze

Odpowiednik bottom.

Więcej szczegółów znajdziesz w dokumentacji MDN CSS.

Type	Required
number, string	No

---

insetBlockStart

uwaga

insetBlockStart jest dostępne tylko w Nowej Architekturze

Odpowiednik top.

Więcej szczegółów znajdziesz w dokumentacji MDN CSS.

Type	Required
number, string	No

---

insetInline

uwaga

insetInline jest dostępne tylko w Nowej Architekturze

Odpowiednik right i left.

Więcej szczegółów znajdziesz w dokumentacji MDN CSS.

Type	Required
number, string	No

---

insetInlineEnd

uwaga

insetInlineEnd jest dostępne tylko w Nowej Architekturze

Gdy kierunek to ltr, insetInlineEnd jest równoważne right. Gdy kierunek to rtl, insetInlineEnd jest równoważne left.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

insetInlineStart

uwaga

insetInlineStart jest dostępne tylko w Nowej Architekturze

Gdy kierunek to ltr, insetInlineStart jest równoważne left. Gdy kierunek to rtl, insetInlineStart jest równoważne right.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

isolation

uwaga

isolation jest dostępne tylko w Nowej Architekturze

isolation pozwala utworzyć kontekst nakładania.

Dostępne dwie wartości:

• auto (domyślnie): Brak działania.

• isolate: Tworzy kontekst nakładania.

Type	Required
enum('auto', 'isolate')	No

---

justifyContent

justifyContent wyrównuje elementy potomne w kierunku głównym. Na przykład, gdy elementy są rozmieszczone pionowo, justifyContent kontroluje ich wyrównanie w pionie. Działa jak justify-content w CSS (domyślnie: flex-start).

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')	No

---

left

left określa przesunięcie lewej krawędzi komponentu (w pikselach logicznych).

Działa podobnie jak left w CSS, ale w React Native należy używać punktów lub procentów. Inne jednostki nie są obsługiwane.

Zobacz dokumentację MDN CSS, aby dowiedzieć się więcej, jak left wpływa na układ.

Type	Required
number, string	No

---

margin

Ustawienie margin ma taki sam efekt jak ustawienie marginTop, marginLeft, marginBottom i marginRight.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

marginBottom

marginBottom działa jak margin-bottom w CSS. Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

marginBlock

Równoważne marginVertical.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

marginBlockEnd

Równoważne marginBottom.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

marginBlockStart

Równoważne marginTop.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

marginEnd

Gdy kierunek układu jest ltr, marginEnd odpowiada marginRight. Gdy kierunek jest rtl, marginEnd odpowiada marginLeft.

Type	Required
number, string	No

---

marginHorizontal

Ustawienie marginHorizontal ma taki sam efekt jak ustawienie zarówno marginLeft, jak i marginRight.

Type	Required
number, string	No

---

marginInline

Równoważne marginHorizontal.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

marginInlineEnd

Gdy kierunek to ltr, marginInlineEnd jest równoważne marginEnd (czyli marginRight). Gdy kierunek to rtl, marginInlineEnd jest równoważne marginEnd (czyli marginLeft).

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

marginInlineStart

Gdy kierunek to ltr, marginInlineStart jest równoważne marginStart (tj. marginLeft). Gdy kierunek to rtl, marginInlineStart jest równoważne marginStart (tj. marginRight).

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

marginLeft

marginLeft działa jak margin-left w CSS. Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

marginRight

marginRight działa jak margin-right w CSS.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

marginStart

Gdy kierunek układu jest ltr, marginStart odpowiada marginLeft. Gdy kierunek jest rtl, marginStart odpowiada marginRight.

Type	Required
number, string	No

---

marginTop

marginTop działa jak margin-top w CSS.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

marginVertical

Ustawienie marginVertical ma taki sam efekt jak ustawienie zarówno marginTop, jak i marginBottom.

Type	Required
number, string	No

---

maxHeight

maxHeight określa maksymalną wysokość komponentu w pikselach logicznych.

Działa podobnie jak max-height w CSS, ale w React Native należy używać punktów lub procentów. Jednostki em i inne nie są obsługiwane.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

maxWidth

maxWidth określa maksymalną szerokość komponentu w pikselach logicznych.

Działa podobnie jak max-width w CSS, ale w React Native należy używać punktów lub procentów. Jednostki em i inne nie są obsługiwane.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

minHeight

minHeight określa minimalną wysokość komponentu w pikselach logicznych.

Działa podobnie jak min-height w CSS, ale w React Native należy używać punktów lub procentów. Jednostki em i inne nie są obsługiwane.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

minWidth

minWidth określa minimalną szerokość komponentu w pikselach logicznych.

Działa podobnie jak min-width w CSS, ale w React Native należy używać punktów lub procentów. Jednostki em i inne nie są obsługiwane.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

overflow

overflow kontroluje sposób pomiaru i wyświetlania elementów potomnych. overflow: hidden powoduje przycięcie widoków, natomiast overflow: scroll umożliwia niezależny pomiar względem głównej osi rodzica. Działa jak overflow w CSS (domyślnie: visible).

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
enum('visible', 'hidden', 'scroll')	No

---

padding

Ustawienie padding ma ten sam efekt co ustawienie paddingTop, paddingBottom, paddingLeft i paddingRight razem.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

paddingBottom

paddingBottom działa jak padding-bottom w CSS.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

paddingBlock

Równoważne paddingVertical.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

paddingBlockEnd

Równoważne paddingBottom.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

paddingBlockStart

Równoważne paddingTop.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

paddingEnd

Gdy kierunek jest ustawiony na ltr, paddingEnd odpowiada właściwości paddingRight. Gdy kierunek jest rtl, paddingEnd odpowiada właściwości paddingLeft.

Type	Required
number, string	No

---

paddingHorizontal

Ustawienie paddingHorizontal jest równoważne ustawieniu zarówno paddingLeft, jak i paddingRight.

Type	Required
number, string	No

---

paddingInline

Równoważne paddingHorizontal.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

paddingInlineEnd

Gdy kierunek to ltr, paddingInlineEnd jest równoważne paddingEnd (tj. paddingRight). Gdy kierunek to rtl, paddingInlineEnd jest równoważne paddingEnd (tj. paddingLeft).

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

paddingInlineStart

Gdy kierunek to ltr, paddingInlineStart jest równoważne paddingStart (tj. paddingLeft). Gdy kierunek to rtl, paddingInlineStart jest równoważne paddingStart (tj. paddingRight).

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

paddingLeft

paddingLeft działa jak padding-left w CSS.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

paddingRight

paddingRight działa jak padding-right w CSS.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

paddingStart

Gdy kierunek jest ltr, paddingStart odpowiada właściwości paddingLeft. Gdy kierunek jest rtl, paddingStart odpowiada właściwości paddingRight.

Type	Required
number, string	No

---

paddingTop

paddingTop działa jak padding-top w CSS.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

paddingVertical

Ustawienie paddingVertical jest równoważne ustawieniu zarówno paddingTop, jak i paddingBottom.

Type	Required
number, string	No

---

position

Właściwość position w React Native działa podobnie jak w standardowym CSS, ale domyślnie wszystkie elementy mają ustawioną wartość relative.

relative pozycjonuje element względem normalnego przepływu układu. Wcięcia (top, bottom, left, right) przesuwają element względem tej pozycji.

absolute wyciąga element z normalnego przepływu układu. Wcięcia przesuwają element względem jego bloku zawierającego.

static pozycjonuje element zgodnie z normalnym przepływem układu. Wcięcia nie mają w tym przypadku żadnego efektu. Elementy static nie tworzą bloku zawierającego dla elementów potomnych z pozycjonowaniem absolute.

Więcej informacji można znaleźć w dokumentacji układu z Flexbox. Dodatkowo dokumentacja Yoga szczegółowo opisuje różnice w działaniu position między React Native a CSS.

Type	Required
enum('absolute', 'relative', 'static')	No

---

right

right określa przesunięcie prawej krawędzi komponentu w pikselach logicznych.

Działa podobnie jak right w CSS, ale w React Native należy używać punktów lub procentów. Jednostki em i inne nie są obsługiwane.

Zobacz dokumentację MDN CSS, aby dowiedzieć się więcej, jak right wpływa na układ.

Type	Required
number, string	No

---

rowGap

rowGap działa jak row-gap w CSS. W React Native obsługiwane są tylko jednostki pikselowe.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number	No

---

start

Gdy kierunek jest ustawiony na ltr, start odpowiada właściwości left. Gdy kierunek jest rtl, start odpowiada właściwości right.

Ten styl ma pierwszeństwo przed stylami left, right i end.

Type	Required
number, string	No

---

top

top to liczba pikseli logicznych, o które przesunięta jest górna krawędź tego komponentu.

Działa podobnie jak top w CSS, ale w React Native musisz używać punktów lub procentów. Jednostki takie jak emy nie są obsługiwane.

Zobacz dokumentację MDN CSS, aby dowiedzieć się więcej, jak top wpływa na układ.

Type	Required
number, string	No

---

width

width ustawia szerokość tego komponentu.

Działa podobnie jak width w CSS, ale w React Native musisz używać punktów lub procentów. Jednostki takie jak em nie są obsługiwane.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number, string	No

---

zIndex

zIndex kontroluje, które komponenty wyświetlają się nad innymi. Zwykle nie używa się zIndex. Komponenty renderują się zgodnie z kolejnością w drzewie dokumentu, więc późniejsze komponenty nakładają się na wcześniejsze. zIndex może być przydatny w animacjach lub niestandardowych interfejsach modalnych, gdzie takie zachowanie jest niepożądane.

Działa jak właściwość CSS z-index — komponenty o większej wartości zIndex będą renderowane na wierzchu. Wyobraź sobie kierunek z jako skierowany od telefonu w stronę twojej gałki ocznej.

W systemie iOS, aby zIndex działał zgodnie z oczekiwaniami, View muszą być elementami równorzędnymi.

Zobacz dokumentację MDN CSS po więcej szczegółów.

Type	Required
number	No