React Native中样式表中的一些样式属性

曾经终败给现在 2022-06-12 07:12 412阅读 0赞

# 1、属性 #

在React Native中，和布局有关的，就是css样式，那么一个View可以设置哪些css样式呢，是和web中的css样式完全一样呢，还是有所不同呢？其实你只要在样式表中书写一个不存在的样式，就会报一大堆错，提示你该样式不存在，然后提供所有可用的样式给你，如图：  
![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]

下面是样式表中一些属相：

"alignItems",
    "alignSelf",
    "backfaceVisibility",
    "backgroundColor",
    "borderBottomColor",
    "borderBottomLeftRadius",
    "borderBottomRightRadius",
    "borderBottomWidth",
    "borderColor",
    "borderLeftColor",
    "borderLeftWidth",
    "borderRadius",
    "borderRightColor",
    "borderRightWidth",
    "borderStyle",
    "borderTopColor",
    "borderTopLeftRadius",
    "borderTopRightRadius",
    "borderTopWidth",
    "borderWidth",
    "bottom",
    "color",
    "flex",
    "flexDirection",
    "flexWrap",
    "fontFamily",
    "fontSize",
    "fontStyle",
    "fontWeight",
    "height",
    "justifyContent",
    "left",
    "letterSpacing",
    "lineHeight",
    "margin",
    "marginBottom",
    "marginHorizontal",
    "marginLeft",
    "marginRight",
    "marginTop",
    "marginVertical",
    "opacity",
    "overflow",
    "padding",
    "paddingBottom",
    "paddingHorizontal",
    "paddingLeft",
    "paddingRight",
    "paddingTop",
    "paddingVertical",
    "position",
    "resizeMode",
    "right",
    "rotation",
    "scaleX",
    "scaleY",
    "shadowColor",
    "shadowOffset",
    "shadowOpacity",
    "shadowRadius",
    "textAlign",
    "textDecorationColor",
    "textDecorationLine",
    "textDecorationStyle",
    "tintColor",
    "top",
    "transform",
    "transformMatrix",
    "translateX",
    "translateY",
    "width",
    "writingDirection"

# 2、定位 #

定位分为相对定位和绝对定位，属性名为position，属性值为absolute和relative。  
在默认晴情况下使用相对定位，

# 3、边框宽度 #

你可以使用设置所有边框的宽度，也可以设置指定某条边的宽度。

borderBottomWidth //底部边框宽度
    borderLeftWidth  //左边边框宽度
    borderRightWidth //右边边框宽度
    borderTopWidth //顶部边框宽度
    borderWidth  //所有边框宽度

# 4、边框颜色 #

同边框宽度属性，属性值为字符串类型的rgb表示方式

borderBottomColor
    borderLeftColor
    borderRightColor
    borderTopColor
    borderColor

# 5、外边距 #

值得注意的是marginVertical相当于同时设置marginTop和marginBottom，marginHorizontal相当于同时设置marginLeft和marginRight，margin相当于同时设置四个

marginBottom
    marginLeft
    marginRight
    marginTop
    marginVertical
    marginHorizontal
    margin

# 6、内边距 #

同外边距一样

paddingBottom  
    paddingLeft  
    paddingRight  
    paddingTop  
    paddingVertical
    paddingHorizontal  
    padding

# 7、背景色 #

背景色，属性值为字符串类型的rgb表示方式

backgroundColor

# 8、边框圆角 #

设置边框的圆角部分

borderTopLeftRadius
    borderTopRightRadius
    borderBottomLeftRadius
    borderBottomRightRadius
    borderRadius

# 9、宽高 #

width 
    height

# 10、Flex布局相关 #

flex number //数字类型按照数字比例占满父组件
    flexDirection enum('row', 'column')  //主轴方向 默认为列方向
    flexWrap enum('wrap', 'nowrap') 
    alignItems enum('flex-start', 'flex-end', 'center', 'stretch') 
    alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') 
    justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')

# 11、字体相关属性 #

color 字体颜色
    fontFamily 字体族
    fontSize 字体大小
    fontStyle 字体样式，正常，倾斜等，值为enum('normal', 'italic')
    fontWeight 字体粗细，值为enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
    letterSpacing 字符间隔
    lineHeight 行高
    textAlign 字体对齐方式，值为enum("auto", 'left', 'right', 'center', 'justify')
    textDecorationLine 貌似没效果，字体修饰，上划线，下划线，删除线，无修饰，值为enum("none", 'underline', 'line-through', 'underline line-through')
    textDecorationStyle enum("solid", 'double', 'dotted', 'dashed') 貌似没效果，修饰的线的类型
    textDecorationColor 貌似没效果，修饰的线的颜色
    writingDirection enum("auto", 'ltr', 'rtl') 不知道什么属性，写作方向？从左到右？从右到左？

# 12、图片相关属性 #

resizeMode enum('cover', 'contain', 'stretch')// cover:等比拉伸 strech:保持原有大小 contain:图片拉伸 充满空间
    overflow enum('visible', 'hidden') 超出部分是否显示，hidden为隐藏
    tintColor 着色，rgb字符串类型
    opacity 透明度

# 13、图像变换 #

scaleX:水平方向缩放
    scaleY:垂直方向缩放
    rotation: 旋转 旋转方向为逆时针，度数必须是string，且要加上deg单位 
    例如：rotation:'-90deg'
    translateX:水平方向平移
    translateY:水平方向平移

# 14、阴影 #

shadowColor
    shadowOffset
    shadowOpacity
    shadowRadius

[SouthEast]: /images/20220612/02f2a487937d4ea3842fd18f2fc1c618.png
[SouthEast 1]: /images/20220612/f9c5b52d723149bf885c8a2c33e674b7.png
[SouthEast 2]: /images/20220612/a6f45e44c2ab4929ab423bf487f77f4b.png