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

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表示方式

borderBottomColorborderLeftColorborderRightColorborderTopColorborderColor

5、外边距

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

marginBottommarginLeftmarginRightmarginTopmarginVerticalmarginHorizontalmargin

6、内边距

同外边距一样

paddingBottom  paddingLeft  paddingRight  paddingTop  paddingVerticalpaddingHorizontal  padding 

7、背景色

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

backgroundColor

8、边框圆角

设置边框的圆角部分

borderTopLeftRadiusborderTopRightRadiusborderBottomLeftRadiusborderBottomRightRadiusborderRadius

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、阴影

shadowColorshadowOffsetshadowOpacityshadowRadius