React Native StyleSheet 样式属性

简介

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,
};