React Native常用組件樣式總結
阿新 • • 發佈:2017-09-05
div toml mri center tran add pro 自動選擇 adding
作為一個js、CSS、RN新手,總是會遇到各種樣式。在不知道樣式有些什麽的情況下難以很好的繪制布局。所以這裏整理了一下幾個常用布局的樣式。
View Style
支持Flexbox、ShadowPropTypesIOS、Transforms屬性。
背面可見性
backfaceVisibility enum(‘visible‘, ‘hidden‘)
背景顏色
backgroundColor string
邊框顏色
borderColor string borderTopColor string borderRightColor string borderBottomColor stringborderLeftColor 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
React Native常用組件樣式總結