1. 程式人生 > >react native樣式設計

react native樣式設計

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 

參考資料
react native中文網