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

Posted 2022-12-12 YanceChen2013

1、属性

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

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

"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