React Native常用元件樣式總結
阿新 • • 發佈：2019-01-04
作為一個JS、CSS、RN新手，總是會遇到各種樣式。在不知道樣式有些什麼的情況下難以很好的繪製佈局。所以這裡整理了一下幾個常用佈局的樣式。
View Style
支援Flexbox、ShadowPropTypesIOS、Transforms屬性。
背面可見性
backfaceVisibility enum('visible', 'hidden')
背景顏色
backgroundColor string
邊框顏色
borderColor string borderTopColor string borderRightColor string borderBottomColor string borderLeftColor string
邊框圓角半徑
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
邊框樣式
borderStyle enum('solid', 'dotted', 'dashed')
邊框寬度
borderWidth number borderTopWidth number borderRightWidth number borderBottomWidth number borderLeftWidth number
不透明度
opacity number
填充
overflow enum('visible', 'hidden')
測試ID（用來定位檢視）
testID string
Image Style
支援Flexbox和Transforms
調整大小模式
resizeMode Object.keys(ImageResizeMode)
背景顏色
backgroundColor string
邊框屬性
borderColor string
borderWidth number
borderRadius 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 number
height number
專案對齊
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
自身對齊
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
邊框寬度
borderBottomWidth number
borderLeftWidth number
borderRightWidth number
borderTopWidth number
borderWidth number
彈性伸縮
flex number
彈性伸縮方向
flexDirection enum('row', 'column')
彈性伸縮包裹
flexWrap enum('wrap', 'nowrap')
證明內容
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
外邊距
margin number
marginBottom number
marginLeft number
marginRight number
marginTop number
marginHorizontal number
marginVertical number
內邊距
padding number
paddingBottom number
paddingLeft number
paddingRight number
paddingTop number
paddingHorizontal number
paddingVertical number
位置（絕對、相對）
position enum('absolute', 'relative')
上下左右
right number
top number
left number
bottom 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