简介

React Native StyleSheet 提供一系类的对样式（类似css）属性。

其中包括

• Layout 布局相关的
• transform 改变相关的
• shadow 阴影相关的
• View 视图相关的
• text 文本相关的
• image 图片相关的
• DangerouslyImprecise 相关的

Layout 布局相关的

export type LayoutStyle = $ReadOnly<{|display?: 'none' | 'flex',width?: DimensionValue,height?: DimensionValue,bottom?: DimensionValue,end?: DimensionValue,left?: DimensionValue,right?: DimensionValue,start?: DimensionValue,top?: DimensionValue,minWidth?: DimensionValue,maxWidth?: DimensionValue,minHeight?: DimensionValue,maxHeight?: DimensionValue,margin?: DimensionValue,marginBottom?: DimensionValue,marginEnd?: DimensionValue,marginHorizontal?: DimensionValue,marginLeft?: DimensionValue,marginRight?: DimensionValue,marginStart?: DimensionValue,marginTop?: DimensionValue,marginVertical?: DimensionValue,padding?: DimensionValue,paddingBottom?: DimensionValue,paddingEnd?: DimensionValue,paddingHorizontal?: DimensionValue,paddingLeft?: DimensionValue,paddingRight?: DimensionValue,paddingStart?: DimensionValue,paddingTop?: DimensionValue,paddingVertical?: DimensionValue,borderWidth?: number,borderBottomWidth?: number,borderEndWidth?: number,borderLeftWidth?: number,borderRightWidth?: number,borderStartWidth?: number,borderTopWidth?: number,position?: 'absolute' | 'relative',flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse',flexWrap?: 'wrap' | 'nowrap',justifyContent?:| 'flex-start'| 'flex-end'| 'center'| 'space-between'| 'space-around'| 'space-evenly',alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline',alignSelf?:| 'auto'| 'flex-start'| 'flex-end'| 'center'| 'stretch'| 'baseline',alignContent?:| 'flex-start'| 'flex-end'| 'center'| 'stretch'| 'space-between'| 'space-around',overflow?: 'visible' | 'hidden' | 'scroll',flex?: number,flexGrow?: number,flexShrink?: number,flexBasis?: number | string,aspectRatio?: number,zIndex?: number,direction?: 'inherit' | 'ltr' | 'rtl',
|}>;

transform 改变相关的

export type TransformStyle = $ReadOnly<{|transform?: $ReadOnlyArray<| {|+perspective: number | AnimatedNode|}| {|+rotate: string|}| {|+rotateX: string|}| {|+rotateY: string|}| {|+rotateZ: string|}| {|+scale: number | AnimatedNode|}| {|+scaleX: number | AnimatedNode|}| {|+scaleY: number | AnimatedNode|}| {|+translateX: number | AnimatedNode|}| {|+translateY: number | AnimatedNode|}| {|+translate: [number | AnimatedNode, number | AnimatedNode] | AnimatedNode,|}| {|+skewX: string|}| {|+skewY: string|}// TODO: what is the actual type it expects?| {|+matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,|},>,
|}>;

shadow 阴影相关的

export type ShadowStyle = $ReadOnly<{|shadowColor?: ColorValue,shadowOffset?: $ReadOnly<{|width?: number,height?: number,|}>,shadowOpacity?: number | AnimatedNode,shadowRadius?: number,
|}>;

View 视图相关的

export type ViewStyle = $ReadOnly<{|...$Exact<LayoutStyle>,...$Exact<ShadowStyle>,...$Exact<TransformStyle>,backfaceVisibility?: 'visible' | 'hidden',backgroundColor?: ColorValue,borderColor?: ColorValue,borderBottomColor?: ColorValue,borderEndColor?: ColorValue,borderLeftColor?: ColorValue,borderRightColor?: ColorValue,borderStartColor?: ColorValue,borderTopColor?: ColorValue,borderRadius?: number,borderBottomEndRadius?: number,borderBottomLeftRadius?: number,borderBottomRightRadius?: number,borderBottomStartRadius?: number,borderTopEndRadius?: number,borderTopLeftRadius?: number,borderTopRightRadius?: number,borderTopStartRadius?: number,borderStyle?: 'solid' | 'dotted' | 'dashed',borderWidth?: number,borderBottomWidth?: number,borderEndWidth?: number,borderLeftWidth?: number,borderRightWidth?: number,borderStartWidth?: number,borderTopWidth?: number,opacity?: number | AnimatedNode,elevation?: number,
|}>;

text 文本相关

export type TextStyle = $ReadOnly<{|...$Exact<ViewStyle>,color?: ColorValue,fontFamily?: string,fontSize?: number,fontStyle?: 'normal' | 'italic',fontWeight?:| 'normal'| 'bold'| '100'| '200'| '300'| '400'| '500'| '600'| '700'| '800'| '900',fontVariant?: $ReadOnlyArray<| 'small-caps'| 'oldstyle-nums'| 'lining-nums'| 'tabular-nums'| 'proportional-nums',>,textShadowOffset?: $ReadOnly<{|width?: number,height?: number,|}>,textShadowRadius?: number,textShadowColor?: ColorValue,letterSpacing?: number,lineHeight?: number,textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify',textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center',includeFontPadding?: boolean,textDecorationLine?:| 'none'| 'underline'| 'line-through'| 'underline line-through',textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed',textDecorationColor?: ColorValue,writingDirection?: 'auto' | 'ltr' | 'rtl',
|}>;

image 图片相关的

export type ImageStyle = $ReadOnly<{|...$Exact<ViewStyle>,resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',tintColor?: ColorValue,overlayColor?: string,
|}>;

DangerouslyImprecise 相关的

export type DangerouslyImpreciseStyle = {...$Exact<TextStyle>,+resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',+tintColor?: ColorValue,+overlayColor?: string,
};