func-package

函数库, 面向复杂业务场景的 js 类库

React-Native 样式指南

React-Native 的样式基本上是实现了 CSS 的一个子集，并且属性名不完全一致，所以当你开始在编写 React-Native 之前，可以先简要了解一下。

目录

Properties 属性

Text 文本

属性名取值描述
color<color>对应 CSS 中的 color 属性
fontFamilystring对应 CSS 中的 font-family 属性
fontSize<number>对应 CSS 中的 font-size 属性
fontStylenormal, italic对应 CSS 中的 font-style 属性，但阉割了 oblique 取值
fontWeightnormal, bold 100~900对应 CSS 中的 font-weight 属性，但阉割了 bolder, lighter 取值
lineHeight<number>对应 CSS 中的 line-height 属性
textAlignauto, left, right, center, justifyiOS对应 CSS 中的 text-align 属性，增加了 auto 取值
textAlignVerticalAndroidauto, top, bottom, center对应 CSS 中的 vertical-align 属性，增加了 auto 取值，center 取代了 middle，并阉割了 baseline, sub 等值
textShadowColor<color>对应 CSS 中的 text-shadow 属性中的颜色定义
textShadowOffset{
width: <number>,
height: <number>
}		对应 CSS 中的 text-shadow 属性中的阴影偏移定义
textShadowRadius<number>在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义
letterSpacingiOS<number>对应 CSS 中的 letter-spacing 属性，但取值不同
textDecorationColoriOS<color>对应 CSS 中的 text-decoration-color 属性
textDecorationLineiOSnone, underline, line-through, underline line-through对应 CSS 中的 text-decoration-line 属性，但阉割了 overline, blink 取值
textDecorationStyleiOSsolid, double, dotted, dashed对应 CSS 中的 text-decoration-style 属性，但阉割了 wavy 取值
writingDirectioniOSauto, ltr, rtl对应 CSS 中的 direction 属性，增加了 auto 取值

Dimension 尺寸

属性名取值描述
width<number>对应 CSS 中的 width 属性
height<number>对应 CSS 中的 height 属性

Positioning 定位

属性名取值描述
positionabsolute, relative对应 CSS 中的 position 属性，但阉割了 static, fixed 取值
top<number>对应 CSS 中的 top 属性
right<number>对应 CSS 中的 right 属性
bottom<number>对应 CSS 中的 bottom 属性
left<number>对应 CSS 中的 left 属性

Margin 外部白

属性名取值描述
margin<number>对应 CSS 中的 margin 属性，不同的是，只能定义一个参数，用以表示上、右、下、左4个方位的外补白
marginHorizontal<number>CSS中没有对应的属性，相当于同时设置marginRight和marginLeft
marginVertical<number>CSS中没有对应的属性，相当于同时设置marginTop和marginBottom
marginTop<number>对应 CSS 中的 margin-top 属性
marginRight<number>对应 CSS 中的 margin-right 属性
marginBottom<number>对应 CSS 中的 margin-bottom 属性
marginLeft<number>对应 CSS 中的 margin-left 属性

Padding 内部白

属性名取值描述
padding<number>对应 CSS 中的 padding 属性，不同的是，只能定义一个参数，用以表示上、右、下、左4个方位的内补白
paddingHorizontal<number>CSS中没有对应的属性，相当于同时设置paddingRight和paddingLeft
paddingVertical<number>CSS中没有对应的属性，相当于同时设置paddingTop和paddingBottom
paddingTop<number>对应 CSS 中的 padding-top 属性
paddingRight<number>对应 CSS 中的 padding-right 属性
paddingBottom<number>对应 CSS 中的 padding-bottom 属性
paddingLeft<number>对应 CSS 中的 padding-left 属性

Border 边框

属性名取值描述
borderStylesolid, dotted, dashed对应 CSS 中的 border-style 属性，但阉割了 none, hidden, double, groove, ridge, inset, outset 取值，且无方向分拆属性
borderWidth<number>对应 CSS 中的 border-width 属性
borderTopWidth<number>对应 CSS 中的 border-top-width 属性
borderRightWidth<number>对应 CSS 中的 border-right-width 属性
borderBottomWidth<number>对应 CSS 中的 border-bottom-width 属性
borderLeftWidth<number>对应 CSS 中的 border-left-width 属性
borderColor<color>对应 CSS 中的 border-color 属性
borderTopColor<color>对应 CSS 中的 border-top-color 属性
borderRightColor<color>对应 CSS 中的 border-right-color 属性
borderBottomColor<color>对应 CSS 中的 border-bottom-color 属性
borderLeftColor<color>对应 CSS 中的 border-left-color 属性
borderRadius<number>对应 CSS 中的 border-radius 属性
borderTopLeftRadius<number>对应 CSS 中的 border-top-left-radius 属性
borderTopRightRadius<number>对应 CSS 中的 border-top-right-radius 属性
borderBottomLeftRadius<number>对应 CSS 中的 border-bottom-left-radius 属性
borderBottomRightRadius<number>对应 CSS 中的 border-bottom-right-radius 属性
shadowColor<color>对应 CSS 中的 box-shadow 属性中的颜色定义
shadowOffset{
width: <number>,
height: <number>
}		对应 CSS 中的 box-shadow 属性中的阴影偏移定义
shadowRadius<number>在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义
shadowOpacity<number>对应 CSS 中的 box-shadow 属性中的阴影透明度定义

Background 背景

属性名取值描述
backgroundColor<color>对应 CSS 中的 background-color 属性

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}]对应 CSS 中的 transform 属性
transformMatrixTransformMatrixPropType类似于 CSS 中 transform 属性的 matrix() 和 matrix3d() 函数
backfaceVisibilityvisible, hidden对应 CSS 中的 backface-visibility 属性

Flexbox 弹性盒

属性名取值描述
flex<number>对应 CSS 中的 flex 属性
flexDirectionrow, column对应 CSS 中的 flex-direction 属性，但阉割了 row-reverse, column-reverse 取值
flexWrapwrap, nowrap对应 CSS 中的 flex-wrap 属性，但阉割了 wrap-reverse 取值
justifyContentflex-start, flex-end, center, space-between, space-around对应 CSS 中的 justify-content 属性，但阉割了 stretch 取值。
alignItemsflex-start, flex-end, center, stretch对应 CSS 中的 align-items 属性，但阉割了 baseline 取值。
alignSelfauto, flex-start, flex-end, center, stretch对应 CSS 中的 align-self 属性，但阉割了 baseline 取值

Other 其他

属性名取值描述
opacity<number>对应 CSS 中的 opacity 属性
overflowvisible, hidden对应 CSS 中的 overflow 属性，但阉割了 scroll, auto 取值
elevationAndroid<number>CSS中没有对应的属性，只在 Android5.0+ 上有效
resizeModecover, contain, stretchCSS中没有对应的属性，可以参考 background-size 属性
overlayColorAndroidstringCSS中没有对应的属性，当图像有圆角时，将角落都充满一种颜色
tintColoriOS<color>CSS中没有对应的属性，iOS 图像上特殊的色彩，改变不透明像素的颜色

Valuse 取值

Color 颜色

React-Native 支持了 CSS 中大部分的颜色类型：

  • #f00 (#rgb)
  • #f00c (#rgba)：CSS 中无对应的值
  • #ff0000 (#rrggbb)
  • #ff0000cc (#rrggbbaa)：CSS 中无对应的值
  • rgb(255, 0, 0)
  • rgba(255, 0, 0, 0.9)
  • hsl(360, 100%, 100%)
  • hsla(360, 100%, 100%, 0.9)
  • transparent
  • Color Name：支持了 基本颜色关键字 和 拓展颜色关键字，但不支持 28个系统颜色；

Number 数值

在 React-Native 中，目前仅支持 Number 这一种长度取值。默认缺省了 pt 单位，详细请看 Units 单位 部分。

Units 单位

Pt 点

在 React-Native 中，并不支持百分比单位，目前只支持一种单位，即 pt 绝对长度单位，同时，你在定义时不需要加单位，例如：

<View style={{width: 100, height: 50}}></View>
var styles = StyleSheet.create({
    box: {
        width: 100,
        height: 50
    }
});

未完待续。。。

2024/10/8 01:29:07