reactnative⽇常-RN所⽀持的常⽤css样式react-native⽀持的css样式
ReactNative中能使⽤的css样式
“alignItems”，居中对齐弹性盒的各项
元素
例：alignItems:‘center’,
stretch(项⽬被拉伸以适应容器)
center(项⽬位于容器的中⼼)
flex-start(项⽬位于容器的开头)
flex-end(项⽬位于容器的结尾)
baseline(项⽬位于容器的基线上)
initial(设置该属性为它的默认值)
inherit(从⽗元素继承该属性)
“alignSelf”，居中对齐弹性对象元素内的某个项
例：alignSelf:‘center’,
auto(默认值。元素继承了它的⽗容器的 align-items 属性。如果没有⽗容器则为 “stretch”)
stretch(项⽬被拉伸以适应容器)
center(项⽬位于容器的中⼼)
flex-start(项⽬位于容器的开头)
flex-end(项⽬位于容器的结尾)
baseline(项⽬位于容器的基线上)
initial(设置该属性为它的默认值)
inherit(从⽗元素继承该属性)
“backfaceVisibility”，当元素不⾯向屏幕时是否可见
例：backfaceVisibility:‘visible’
visible (背⾯是可见的)
hidden (背⾯是不可见的)
“backgroundColor”，背景⾊
例：backgroundColor:‘red’
例：backgroundColor:’#cccccc’
color (指定背景颜⾊。在CSS颜⾊值近可能的寻⼀个颜⾊值的完整列表)
transparent (指定背景颜⾊应该是透明的。这是默认)
inherit (指定背景颜⾊，应该从⽗元素继承)
“borderBottomColor”，底部边框颜⾊
例：borderBottomColor:‘red’
例：borderBottomColor:’#cccccc’
color (指定背景颜⾊。在CSS 颜⾊值 查颜⾊值的完整列表)
transparent (指定边框的颜⾊应该是透明的。这是默认)
inherit (指定边框的颜⾊，应该从⽗元素继承)
“borderBottomLeftRadius”，左下⾓添加圆⾓边框
例：borderBottomLeftRadius:10
“borderBottomRightRadius”，右下⾓添加圆⾓边框
例：borderBottomRightRadius:10
“borderBottomWidth”，底部边框宽度
例：borderBottomWidth:8
“borderColor”，四个边框颜⾊
例：borderColor:’#00ff00’
“borderLeftColor”，左边框颜⾊
例：borderLeftColor:‘yellow’
“borderLeftWidth”，左边框宽度
例：borderLeftWidth:10
“borderRadius”，四⾓圆⾓弧度
例：borderRadius:15
“borderRightColor”，右边框颜⾊
例：例：borderRightColor:‘yellow’
“borderRightWidth”，右边框宽度
例：borderRightWidth:10
“borderStyle”，四个边框的样式
例：borderStyle:‘dotted’
none 定义⽆边框。
hidden 与 “none” 相同。不过应⽤于表时除外，对于表，hidden ⽤于解决边框冲突。dotted 定义点状边框。在⼤多数浏览器中呈现为实线。
dashed 定义虚线。在⼤多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从⽗元素继承边框样式。
“borderTopColor”，上边框颜⾊
例：borderTopColor：‘red’
“borderTopLeftRadius”，左上⾓圆⾓弧度
例：borderTopLeftRadius：3
“borderTopRightRadius”，右上⾓圆⾓弧度
例：borderTopRightRadius：4
“borderTopWidth”，顶部边框宽度
例：borderTopWidth：13
“borderWidth”，四个边框的宽度
例：borderWidth：2
“bottom”，图像的底部边缘
例：bottom:20
“color”，颜⾊
例：color:‘red’
“elevation”,Z轴，可产⽣⽴体效果
例：elevation:1
“flex”，让所有弹性盒模型对象的⼦元素都有相同的长度，忽略它们内部的内容
例：flex:1reactnative原生列表
“flexDirection”，设置
元素内弹性盒元素的⽅向为相反的顺序
例：flexDirection:‘column’
row ((默认值。灵活的项⽬将⽔平显⽰，正如⼀个⾏⼀样)
row-reverse (与 row 相同，但是以相反的顺序)
column (灵活的项⽬将垂直显⽰，正如⼀个列⼀样)
column-reverse (与 column 相同，但是以相反的顺序)
initial (设置该属性为它的默认值。请参阅 initial)
inherit (从⽗元素继承该属性。请参阅 inherit)
“flexWrap”，让弹性盒元素在必要的时候拆⾏
例：flexWrap:‘wrap’
nowrap (默认值。规定灵活的项⽬不拆⾏或不拆列)
wrap (规定灵活的项⽬在必要的时候拆⾏或拆列)
wrap-reverse (规定灵活的项⽬在必要的时候拆⾏或拆列，但是以相反的顺序) initial (设置该属性为它的默认值。请参阅 initial)
inherit (从⽗元素继承该属性。请参阅 inherit)
“fontFamily”，字体
例：fontFamily:‘courier’
“fontSize”，字体⼤⼩
例：fontSize:20
“fontStyle”,
例：fontStyle:‘italic’
normal 默认值。浏览器显⽰⼀个标准的字体样式。
italic 浏览器会显⽰⼀个斜体的字体样式。
oblique 浏览器会显⽰⼀个倾斜的字体样式
“fontWeight”,⽂本的粗细
例：fontWeight:‘bold’
normal (默认值。定义标准的字符)
bold (定义粗体字符)
bolder (定义更粗的字符)
lighter (定义更细的字符)
100 (定义由粗到细的字符。400 等同于 normal，⽽ 700 等同于 bold)
“height”，设置元素的⾼度
例：height:200
“justifyContent”，在弹性盒对象的元素中的各项周围留有空⽩
例：justifyContent:‘space-between’
flex-start (默认值。项⽬位于容器的开头)
flex-end (项⽬位于容器的结尾)
center (项⽬位于容器的中⼼)
space-between (项⽬位于各⾏之间留有空⽩的容器内)
space-around (项⽬位于各⾏之前、之间、之后都留有空⽩的容器内)
“left”，把图像的左边缘设置在其包含元素左边缘向右5像素的位置
例：left:20
“letterSpacing”，字母间距
例：letterSpacing:20
“lineHeight”,⾏⾼
例：lineHeight:30
“margin”，元素的所有四个边距
例：
“marginBottom”，下边距
例：marginBottom:50
“marginHorizontal”,⽔平间距，即左边距和右边距
例：marginHorizontal:10
“marginLeft”，左边距
例：marginLeft:50
“marginRight”，右边距
例：marginRight:50
“marginTop”，上边距
例：marginTop:50
“marginVertical”，垂直间距，即上边距和下边距
例：marginVertical:10
“opacity”，透明度级别
例：opacity：0.5
“overflow”，设置overflow属性进⾏滚动
例：overflow:‘hidden’
visible (默认值。内容不会被修剪，会呈现在元素框之外)
hidden (内容会被修剪，并且其余内容是不可见的)
scroll (内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容)
“overlayColor”,
例：
“padding”，填充
例：
“paddingBottom”，下填充
例：
“paddingHorizontal”，左右填充
例：
“paddingLeft”，左填充
例：
“paddingRight”，右填充
例：
“paddingTop”，上填充
例：
“paddingVertical”，上下填充
例：
“position”，定位
例：position:‘fixed’
absolute ⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。元素的位置通过 “left”, “top”, “right” 以及“bottom” 属性进⾏规定。
fixed ⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进⾏规定。relative ⽣成相对定位的元素，相对于其正常位置进⾏定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
“resizeMode”,⽤户调整⼤⼩
例：resizeMode:‘cover’
cover 等⽐拉伸
strech 保持原有⼤⼩
contain 图⽚拉伸 充满空间
“right”，把图像的右边缘设置在其包含元素右边缘向左 5 像素的位置例：right:5
“rotation”，元素旋转
例：rotation：180
“scaleX”,
例：
“scaleY”,
例：
“shadowColor”,
例：
“shadowOffset”,
例：
“shadowOpacity”,
例：
“shadowRadius”,
例：
“textAlign”,⽂本对齐⽅式
例：textAlign:‘left’
left 把⽂本排列到左边。默认值：由浏览器决定。
right 把⽂本排列到右边。
center 把⽂本排列到中间。
justify 实现两端对齐⽂本效果
“textAlignVertical”,
例：
“textDecorationColor”，下划线⽂本中下划线的颜⾊
例：textDecorationColor:‘red’
“textDecorationLine”，显⽰⼀条线
例：textDecorationLine:‘underline’
none 默认值。规定⽂本修饰没有线条。 测试 »
underline 规定⽂本的下⽅将显⽰⼀条线。 测试 »
overline 规定⽂本的上⽅将显⽰⼀条线。 测试 »
line-through 规定⽂本的中间将显⽰⼀条线
“textDecorationStyle”，显⽰⼀条线的样式
例：textDecorationStyle:‘solid’
solid 默认值。线条将显⽰为单线。
double 线条将显⽰为双线。
dotted 线条将显⽰为点状线。
dashed 线条将显⽰为虚线。
wavy 线条将显⽰为波浪线
“textShadowColor”,⽂字阴影颜⾊
例：textShadowColor：‘red’

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。