alignItems在橫向上對齊子項。例如，如果子項垂直流動，則alignItems控制它們如何水平對齊。它的工作方式類似於CSS中的align-items（默認值：stretch）。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

TYPE	REQUIRED
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')	No

`alignSelf`

alignSelf 控制子項在橫向上的對齊方式，覆蓋父項的alignItems。它的作用類似於CSS中的align-self（默認值：auto）。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

TYPE	REQUIRED
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')	No

`aspectRatio`

寬高比控制節點未定義尺寸的大小。寬高比是一種非標準屬性，僅適用於本機而非CSS。

在具有設置寬度/高度寬高比的節點上，控制未設置尺寸的大小
在具有設置彈性基礎寬高比的節點上，如果未設置，則控制橫軸中節點的大小
在具有度量函數的節點上，縱橫比就像測量函數測量彈性基礎一樣工作
在具有彈性增長/縮小寬高比的節點上，如果未設置，則控制橫軸中節點的大小
寬高比考慮了最小/最大尺寸

TYPE	REQUIRED
number	No

`borderBottomWidth`

borderBottomWidth 的工作方式類似於CSS中的border-bottom-width。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width

TYPE	REQUIRED
number	No

`borderEndWidth`

當direction是ltr時，borderEndWidth等於borderRightWidth。當direction為rtl時，borderEndWidth等於borderLeftWidth。

TYPE	REQUIRED
number	No

`borderLeftWidth`

borderLeftWidth 的工作方式類似於CSS中的border-left-width。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width

TYPE	REQUIRED
number	No

`borderRightWidth`

borderRightWidth 的工作方式類似於CSS中的border-right-width。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width

TYPE	REQUIRED
number	No

`borderStartWidth`

當direction是ltr時，borderStartWidth等於borderLeftWidth。當direction是rtl時，borderStartWidth等於borderRightWidth。

TYPE	REQUIRED
number	No

`borderTopWidth`

borderTopWidth 的工作方式類似於CSS中的border-top-width。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width

TYPE	REQUIRED
number	No

`borderWidth`

borderWidth 的工作方式類似於CSS中的border-width。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/border-width

TYPE	REQUIRED
number	No

`bottom`

bottom是偏移此組件底邊的邏輯像素數。

它與CSS中的底部類似，但在React Native中，您必須使用點或百分比。不支持Ems和其他單位。

有關底部如何影響佈局的更多詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/bottom

TYPE	REQUIRED
number, ,string	No

`direction`

direction 指定用戶界面的方向流。默認值為inherit，但根節點除外，根節點的值基於當前語言環境。有關詳細信息，請參閱 https://facebook.github.io/yoga/docs/rtl/

TYPE	REQUIRED	PLATFORM
enum('inherit', 'ltr', 'rtl')	No	iOS

`display`

display 設置此組件的顯示類型。

它的工作方式類似於在CSS中顯示，但僅支持'flex'和'none'。 'flex'是默認值。

TYPE	REQUIRED
enum('none', 'flex')	No

`end`

當方向是ltr時，end相當於right。當方向是rtl時，end相當於left。

此樣式優先於左右樣式。

TYPE	REQUIRED
number, ,string	No

`flex`

在React Native中，flex的工作方式與在CSS中的工作方式不同。 flex是一個數字而不是一個字符串，它的工作原理是瑜伽庫，網址是https://github.com/facebook/yoga

當flex是正數時，它使組件具有靈活性，並且其大小將與其彈性值成比例。因此，將flex設置為2的組件將彈性設置為1的組件佔用兩倍的空間。

當flex為0時，組件的大小根據寬度和高度而不靈活。

當flex為-1時，組件通常根據寬度和高度確定大小。但是，如果沒有足夠的空間，組件將縮小到minWidth和minHeight。

flexGrow，flexShrink和flexBasis的工作方式與CSS相同。

TYPE	REQUIRED
number	No

`flexBasis`

TYPE	REQUIRED
number, ,string	No

`flexDirection`

flexDirection 控制容器子項的方向。行從左到右，列從上到下，你可以猜出其他兩個做什麼。它的工作方式類似於CSS中的flex-direction，但默認為列。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

TYPE	REQUIRED
enum('row', 'row-reverse', 'column', 'column-reverse')	No

`flexGrow`

TYPE	REQUIRED
number	No

`flexShrink`

TYPE	REQUIRED
number	No

`flexWrap`

flexWrap控制子項是否可以在它們到達Flex容器的末尾後迴繞。它的工作方式類似於CSS中的flex-wrap（默認值：nowrap）。有關詳細信息，請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap。注意它不再適用於alignItems：stretch（默認值），所以你可能想使用alignItems：flex-start例如（打破更改細節：https：//github.com/facebook/react-native/releases/tag /v0.28.0）。

TYPE	REQUIRED
enum('wrap', 'nowrap')	No

`height`

height設置此組件的高度。

它與CSS中的高度類似，但在React Native中，您必須使用點或百分比。不支持Ems和其他單位。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/height

TYPE	REQUIRED
number, ,string	No

`justifyContent`

justifyContent 將兒童與主要方向對齊。例如，如果孩子垂直流動，justifyContent控制他們垂直對齊的方式。它的工作方式類似於CSS中的justify-content（默認值：flex-start）。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

TYPE	REQUIRED
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')	No

`left`

left 是偏移此組件左邊緣的邏輯像素數。

它與CSS中的左側工作方式類似，但在React Native中，您必須使用點或百分比。不支持Ems和其他單位。

有關左邊如何影響佈局的更多詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/left

TYPE	REQUIRED
number, ,string	No

`margin`

設置邊距與設置marginTop，marginLeft，marginBottom和marginRight中的每一個具有相同的效果。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/margin

TYPE	REQUIRED
number, ,string	No

`marginBottom`

marginBottom 就像CSS中的margin-bottom一樣。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom

TYPE	REQUIRED
number, ,string	No

`marginEnd`

當direction是ltr時，marginEnd等於marginRight。當direction是rtl時，marginEnd相當於marginLeft。

TYPE	REQUIRED
number, ,string	No

`marginHorizontal`

marginHorizontal
設置marginHorizontal與設置marginLeft和marginRight具有相同的效果。

TYPE	REQUIRED
number, ,string	No

`marginLeft`

marginLeft 的工作方式類似於CSS中的margin-left。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left

TYPE	REQUIRED
number, ,string	No

`marginRight`

marginRight就像CSS中的margin-right一樣。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right

TYPE	REQUIRED
number, ,string	No

`marginStart`

當direction是ltr時，marginStart相當於marginLeft。當direction是rtl時，marginStart等於marginRight。

TYPE	REQUIRED
number, ,string	No

`marginTop`

marginTop 就像CSS中的margin-top一樣。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top

TYPE	REQUIRED
number, ,string	No

`marginVertical`

設置 marginVertical 與設置 marginTop 和 marginBottom 具有相同的效果。

TYPE	REQUIRED
number, ,string	No

`maxHeight`

maxHeight此組件的最大高度，以邏輯像素為單位。

它與CSS中的max-height類似，但在React Native中，您必須使用點或百分比。不支持Ems和其他單位。

有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

TYPE	REQUIRED
number, ,string	No

`maxWidth`

maxWidth是此組件的最大寬度，以邏輯像素為單位。

它與CSS中的max-width類似，但在React Native中，您必須使用點或百分比。不支持Ems和其他單位。

有關更多信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

TYPE	REQUIRED
number, ,string	No

`minHeight`

minHeight 是此組件的最小高度，以邏輯像素為單位。

它與CSS中的min-height類似，但在React Native中，您必須使用點或百分比。不支持Ems和其他單位。

有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

TYPE	REQUIRED
number, ,string	No

`minWidth`

minWidth 是此組件的最小寬度，以邏輯像素為單位。

它與CSS中的min-width類似，但在React Native中，您必須使用點或百分比。不支持Ems和其他單位。

有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

TYPE	REQUIRED
number, ,string	No

`overflow`

溢出控制孩子的測量和顯示方式。溢出：隱藏導致視圖在溢出時被剪切：滾動導致視圖的測量與父項主軸無關。它的工作方式類似於CSS中的溢出（默認值：可見）。有關詳細信息，請參閱https://developer.mozilla.org/en/docs/Web/CSS/overflow 溢出：可見僅適用於iOS。在Android上，所有視圖都會剪切他們的孩子。

TYPE	REQUIRED
enum('visible', 'hidden', 'scroll')	No

`padding`

設置填充與設置paddingTop，paddingBottom，paddingLeft和paddingRight的效果相同。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/padding

TYPE	REQUIRED
number, ,string	No

`paddingBottom`

paddingBottom 來
paddingBottom 的工作方式類似於CSS中的padding-bottom。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom

TYPE	REQUIRED
number, ,string	No

`paddingEnd`

當direction是ltr時，paddingEnd相當於paddingRight。當direction是rtl時，paddingEnd相當於paddingLeft。

TYPE	REQUIRED
number, ,string	No

`paddingHorizontal`

設置paddingHorizontal就像設置paddingLeft和paddingRight。

TYPE	REQUIRED
number, ,string	No

`paddingLeft`

paddingLeft 的工作方式類似於CSS中的padding-left。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left

TYPE	REQUIRED
number, ,string	No

`paddingRight`

paddingRight 就像在CSS中填充一樣。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right

TYPE	REQUIRED
number, ,string	No

`paddingStart`

當direction是ltr時，paddingStart相當於paddingLeft。當direction是rtl時，paddingStart相當於paddingRight。

TYPE	REQUIRED
number, ,string	No

`paddingTop`

paddingTop 的工作方式類似於CSS中的padding-top。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top

TYPE	REQUIRED
number, ,string	No

`paddingVertical`

設置paddingVertical就像設置paddingTop和paddingBottom一樣。

TYPE	REQUIRED
number, ,string	No

`position`

React Native中的位置與常規CSS類似，但默認情況下，所有內容都設置為相對，因此絕對定位始終只相對於父級。

如果要使用相對於其父級的特定數量的邏輯像素來定位子項，請將子項設置為具有絕對位置。

如果你想讓一個孩子相對於不是父母的東西，那就不要使用樣式。使用組件樹。

有關React Native和CSS之間位置如何不同的詳細信息，請參閱 https://github.com/facebook/yoga

TYPE	REQUIRED
enum('absolute', 'relative')	No

`right`

right 是偏移此組件右邊緣的邏輯像素數。

它在CSS中的工作方式類似，但在React Native中，您必須使用點或百分比。不支持Ems和其他單位。

有關如何影響佈局的更多詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/right

TYPE	REQUIRED
number, ,string	No

`start`

當方向是ltr時，start等於left。當方向是rtl時，start等同於right。

此樣式優先於左，右和末端樣式。

TYPE	REQUIRED
number, ,string	No

`top`

top 是偏移此組件上邊緣的邏輯像素數。

它與CSS中的top類似，但在React Native中，您必須使用點或百分比。不支持Ems和其他單位。

有關top如何影響佈局的更多詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/top

TYPE	REQUIRED
number, ,string	No

`width`

width 設置此組件的寬度。

它與CSS中的寬度類似，但在React Native中，您必須使用點或百分比。不支持Ems和其他單位。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/width

TYPE	REQUIRED
number, ,string	No

`zIndex`

zIndex 控制哪些組件顯示在其他組件之上。通常，您不使用zIndex。組件根據文檔樹中的順序進行渲染，因此後面的組件會繪製先前的組件。如果您有不想要此行為的動畫或自定義模式接口，則zIndex可能很有用。

它的工作方式類似於CSS z-index屬性 - 具有較大zIndex的組件將呈現在頂部。想像一下z方向，就像從手機指向你的眼球一樣。有關詳細信息，請參閱 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

在iOS上，zIndex可能要求Views成為彼此的兄弟，以使其按預期工作。

TYPE	REQUIRED
number	No

Tags : 文件, 前端技術, 網頁設計, APIs, cli, CSS, Facebook, layout, props, React, React Native, Reactjs, ReactNative, style, UI

A-Fu Design

【React Native】文件翻譯閱讀紀錄 - APIs - Layout Props

Props

參考

Props

alignContent

alignItems

alignSelf

aspectRatio

borderBottomWidth

borderEndWidth

borderLeftWidth

borderRightWidth

borderStartWidth

borderTopWidth

borderWidth

bottom

direction

display

end

flex

flexBasis

flexDirection

flexGrow

flexShrink

flexWrap

height

justifyContent

left

margin

marginBottom

marginEnd

marginHorizontal

marginLeft

marginRight

marginStart

marginTop

marginVertical

maxHeight

maxWidth

minHeight

minWidth

overflow

padding

paddingBottom

paddingEnd

paddingHorizontal

paddingLeft

paddingRight

paddingStart

paddingTop

paddingVertical

position

right

start

top

width

zIndex

You May Also Like

0 意見

About me

Follow Us

Categories

Recent Posts

Sponsor

Facebook

Blog Archive

`alignContent`

`alignItems`