React Native常用組件樣式總結

標籤：

作為一個JS、CSS、RN新手，總是會遇到各種樣式。在不知道樣式有些什麼的情況下難以很好的繪製布局。所以這裡整理了一下幾個常用布局的樣式。

View Style

支援Flexbox、ShadowPropTypesIOS、Transforms屬性。

背面可見度

backfaceVisibility enum(‘visible‘, ‘hidden‘)

背景顏色

backgroundColor string

邊框顏色

borderColor stringborderTopColor stringborderRightColor stringborderBottomColor stringborderLeftColor string

邊框圓角半徑

borderRadius numberborderTopLeftRadius numberborderTopRightRadius numberborderBottomLeftRadius numberborderBottomRightRadius number

邊框樣式

borderStyle enum(‘solid‘, ‘dotted‘, ‘dashed‘)

邊框寬度

borderWidth numberborderTopWidth numberborderRightWidth numberborderBottomWidth numberborderLeftWidth number

不透明度

opacity number

填充

overflow enum(‘visible‘, ‘hidden‘)

測試ID（用來定位視圖）

testID string

Image Style

支援Flexbox和Transforms

調整大小模式

resizeMode Object.keys(ImageResizeMode)

背景顏色

backgroundColor string

邊框屬性

borderColor stringborderWidth numberborderRadius number

填充

overflow enum(‘visible‘, ‘hidden‘)

色彩顏色

tintColor string

不透明度

opacity number

Text Style

支援View的樣式

字型顏色

color string

字型

fontFamily string

字型大小

fontSize number

字型樣式

fontStyle enum(‘normal‘, ‘italic‘)

字型粗細（指定字型的粗細。大多數字型都支援’normal’和’bold’值。並非所有字型都支援所有的數字值。如果某個值不支援，則會自動選擇最接近的值。）

fontWeight enum("normal", ‘bold‘, ‘100‘, ‘200‘, ‘300‘, ‘400‘, ‘500‘, ‘600‘, ‘700‘, ‘800‘, ‘900‘)

字間距

letterSpacing number

行間距

lineHeight number

字型對齊（指定文本的對齊。其中’justify’值僅iOS支援。）

textAlign enum("auto", ‘left‘, ‘right‘, ‘center‘, ‘justify‘)

Flexbox Style

寬高

width numberheight number

項目對齊

alignItems enum(‘flex-start‘, ‘flex-end‘, ‘center‘, ‘stretch‘)

自身對齊

alignSelf enum(‘auto‘, ‘flex-start‘, ‘flex-end‘, ‘center‘, ‘stretch‘)

邊框寬度

borderBottomWidth numberborderLeftWidth numberborderRightWidth numberborderTopWidth numberborderWidth number

Auto Scaling

flex number

Auto Scaling方向

flexDirection enum(‘row‘, ‘column‘)

Auto Scaling包裹

flexWrap enum(‘wrap‘, ‘nowrap‘)

證明內容

justifyContent enum(‘flex-start‘, ‘flex-end‘, ‘center‘, ‘space-between‘, ‘space-around‘)

外邊距

margin numbermarginBottom numbermarginLeft numbermarginRight numbermarginTop numbermarginHorizontal numbermarginVertical number

內邊距

padding numberpaddingBottom numberpaddingLeft numberpaddingRight numberpaddingTop numberpaddingHorizontal numberpaddingVertical number

位置（絕對、相對）

position enum(‘absolute‘, ‘relative‘)

上下左右

right numbertop numberleft numberbottom number

Transform

屬性變化

transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}] 

屬性矩陣

transformMatrix TransformMatrixPropType 

參考資料

react native中文網

React Native常用組件樣式總結